Vue项目学习

发表于： 分类于：
字数： 657 阅读：≈ 2分钟 浏览：

Vue学习笔记

一、二维数组尝试 

1
2
3
4
5
6
7

var vm = new Vue({
	el: "#app",
	data: {
	huilv:[
	[6.8540, 132.9787, 1298.7013, 1.3278],
	[6.8540, 132.9787, 1298.7013, 1.3278]
		],}

二、watch监听实现 

1
2
3
4
5
6
7
8

watch: {
			first: function(newValue) {
	  this.second = newValue * this.huilv[Number(this.firstbutton - 1)][Number(this.secondbutton -1)];
					},
			second: function(newValue) {
		this.first = newValue / this.huilv[Number(this.firstbutton - 1)][Number(this.secondbutton -1)];
					}
				}

三、数组的更新检测

#变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法。比如 example1.items.push({ message: 'Baz' })。

四、链接数据库

得到数据库的消息 

1
2
3
4
5
6
7
8
9

getmessage() {
				const self = this;
				self.$http.post('/api/user/getchat').then(function(response) {
					console.log(response.data);
					self.messages = response.data;
				}).catch(function(error) {
					console.log(error);
				});
			},

提供获得数据的路由表内的接口 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

router.post('/getchat', (req, res) => {
  const sql = $sql.userchat.getmessage;
  conn.query(sql, (err, result) => {
    if (err) {
      console.log(err);
      res.json({ success: false, message: 'Database error occurred.' });
      return;
    }

    console.log(result); // 在控制台上打印查找到的结果

    res.json(result); // 将查询结果返回给客户端
  });
});

将数据通过post方法提交的数据库 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

self.$http.post('/api/user/addchat', data).then(function(response) {
					console.log(response.data);
					self.messages.push({
						name: username,
						message: self.newMessage,
						time: dateTime,
					});
					self.newMessage = "";
				}).catch(function(error) {
					console.log(error);
				}

在路由表提供提交的数据的接口 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

router.post('/addchat', (req, res) => {
  var sql_send = $sql.userchat.addmessage;
  var params = req.body; // 提取请求体中的数据

  // 建立连接，向表中插入值，INSERT INTO userchat() VALUES(?, ?)
  conn.query(sql_send, [params.name, params.message,params.time], function(err, result) {
    if (err) {
      console.log(err);
      res.status(500).json({ error: 'Database error occurred.' });
      return;
    }

    console.log(result);
	

    if (result.affectedRows > 0) {
      res.json({ success: true, message: 'Message sent successfully'});
    } else {
      res.json({ success: false, message: 'Failed to send message.'});
    }
  });
});

sqlmap内容

sqlmap提供给接口语句

如：

1

var sql_send = $sql.userchat.addmessage;

这个就是调用接口上的addmessage语句拼接mysql语句实现对数据库操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var sqlMap = {
  user: {
    add: 'insert into user (username, account, password, repeatPass, email, phone, card, birth, sex) values (?,?,?,?,?,?,?,?,?)',
    select_name: 'select * from user ', //部分查询语句
    update_user: 'update user set ' ,//部分查询语句
  },
  userchat: {   // 聊天消息操作 SQL 语句 Object，注意要加上 {}
          addmessage: 'INSERT INTO userchat(name,message,time) VALUES(?,?,?)',
		  getmessage: 'select * from userchat ',
      }
}