13518219792
这篇文章给大家分享的是有关如何利用Vue.js框架来完成Web应用程序前端与后端之间的交互的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联公司是专业的中江网站建设公司，中江接单;提供成都做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行中江网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
如何利用 Vue.js 框架来完成 Web 应用程序的前端与后端之间的交互。这一次，我同样会通过构建一个"留言本"应用来贯穿整个学习过程。
首先需要在code目录下依次执行npm install express body-parser knex和npm install sqlite3@<指定的版本>命令，安装接下来创建 Web 服务所需要的后端组件（需要注意的是，这里安装的sqlite3要根据knex安装后的提示选择对应的版本）。接下来，在code目录下创建一个名为03_Message的目录，并在该目录下执行npm init -y命令，将其初始化成一个 Node.js 项目。在这里，之所以将服务端所需要的组件安装在项目目录的上一级目录中，是因为我接下来还需要在项目目录中安装前端组件，并将其开放给浏览器端访问，所以前后端所需要的组件最好分开存放。
现在，我要基于 Express 框架来创建一个 Web 服务了。具体做法就是在code/03_Message目录下创建一个名为index.js的服务器端脚本文件，并在其中输入如下代码：
const path = require('path');
const express = require('express')
const bodyParser = require('body-parser');
const knex = require('knex');
const port = 8080;
// 创建服务器实例
const app = express();
// 配置 public 目录，将其开放给浏览器端
app.use('/', express.static(path.join(__dirname, 'public')));
// 配置 node_modules 目录，将其开放给浏览器端
app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));
//配置 body-parser 中间件，以便获取 POST 请求数据。
app.use(bodyParser.urlencoded({ extended : false}));
app.use(bodyParser.json());
// 创建数据库连接对象：
const appDB = knex({
client: 'sqlite3', // 设置要连接的数据类型
connection: { // 设置数据库的链接参数
filename: path.join(__dirname, 'data/database.sqlite')
},
debug: true, // 设置是否开启 debug 模式，true 表示开启
pool: { // 设置数据库连接池的大小，默认为{min: 2, max: 10}
min: 2,
max: 7
},
useNullAsDefault: true
});
appDB.schema.hasTable('notes') // 查看数据库中是否已经存在 notes 表
.then(function(exists) {
if(exists == false) { // 如果 notes 表不存在就创建它
appDB.schema.createTable('notes', function(table) {
// 创建 notes 表：
table.increments('uid').primary();// 将 uid 设置为自动增长的字段，并将其设为主键。
table.string('userName'); // 将 userName 设置为字符串类型的字段。
table.string('noteMessage'); // 将 notes 设置为字符串类型的字段。
});
}
})
.then(function() {
// 请求路由
// 设置网站首页
app.get('/', function(req, res) {
res.redirect('/index.htm');
});
// 响应前端获取数据的 GET 请求
app.get('/data/get', function(req, res) {
appDB('notes').select('*')
.then(function(data) {
console.log(data);
res.status(200).send(data);
}).catch(function() {
res.status(404).send('找不到相关数据');
});
});
// 响应前端删除数据的 POST 请求
app.post('/data/delete', function(req, res) {
appDB('notes').delete()
.where('uid', '=', req.body['uid'])
.catch(function() {
res.status(404).send('删除数据失败');
});
res.send(200);
});
// 响应前端添加数据的 POST 请求
app.post('/data/add', function(req, res) {
console.log('post data');
appDB('notes').insert(
{
userName : req.body['userName'],
noteMessage : req.body['noteMessage']
}
).catch(function() {
res.status(404).send('添加数据失败');
});
res.send(200);
});
// 监听 8080 端口
app.listen(port, function(){
console.log(`访问 http://localhost:${port}/，按 Ctrl+C 终止服务！`);
});
})
.catch(function() {
// 断开数据库连接，并销毁 appDB 对象
appDB.destroy();
});由于 Vue.js 框架的特点，前端需要后端提供的服务除了获取指定的 HTML 和 JavaScript 文件之外，主要就是对数据库的增删改查操作了，所以在上面这个服务中，除了将public、node_modules目录整体开放给浏览器端访问之外，主要提供了一个基于 GET 请求的数据查询服务，和两个基于 POST 请求的数据添加与删除操作。
接下来，我可以开始前端部分的构建了。首先需要在code/03_Message目录下执行npm install vue axios命令，安装接下来所要用到的前端组件（该命令会自动生成一个node_modules目录，正如上面所说，该目录会被服务端脚本整体开放给浏览器端）。然后，继续在同一目录下创建public目录，并在其中创建一个名为index.htm的文件，其代码如下：