vue 框架属于前端的 js, 需要与后端 koa 框架的 nodejs 进行交互, 这是怎么做到的?
直接能想到的, 就是 nodejs 直接通过 io 去动态修改前端的 vue 文件的 js 代码, 这样当浏览器打开 html 文件的时候, html 文件会去加载 vue 的 js 文件, 这样看起来就实现了前后端 js 数据的交互
如果按照上面的思路, 需要先等待 koa 后端 js 执行完之后, vue 的 js 文件修改完成了之后, koa 的 js 文件再执行重定向, 调用浏览器打开修改好的 html 文件
这样就完成了一个操作流程
这里有个点?!
后端框架 koa 使用 nodejs, 在操作系统纸上运行各种服务; 而前端 vue 框架使用 js, 在浏览器上执行路由等各种功能, 浏览器 js 的边界在哪里?;
这就意味着, vue 框架的使用范围在被限制在浏览器里了, 而 koa 实际上是 nodejs 的代码集合, 可以操作到 vue 框架也就是浏览器里的 js 代码; 那么, 可以把 vue 代码直接放进 koa 代码里, 让 vue 的代码成为 koa 代码的数据的一部分 (这里指的是 "指令与数据" 里面的数据), 把 vue 的代码作为数据交给 koa 操作
这里可能有两种情况:
当在浏览器点击按钮的时候, 浏览器里的 js 向后端发去一条信息, 后端的 nodejs 写的服务接收到这条信息之后, 对这条信息进行解析和响应或执行, 把执行完的结果返回给前端浏览器的 js, 前端浏览器的 js 一直在等待着返回的信息, 现在收到信息后, 对信息进行解析和重组, 渲染成我们最终看到的页面
当在浏览器点击按钮的时候, 浏览器里的 js 向后端发去一条信息, 后端的 nodejs 写的服务接收到这条信息之后, 对这条信息进行解析和响应或执行, 把执行完的结果进行重组, 最后保存为一份 js 文件或者 html 文件, 然后返回一条信息给前端浏览器的 js, 提醒前端浏览器的 js 去信息里的地址里下载对应的文件, 前端浏览器的 js 一直在等待着返回的信息, 现在收到信息以及信息里的提醒后, 会下载对应的文件, 再把下载好的文件渲染成我们最终看到的页面
有什么区别吗!?
额, 有的, 因为这些区别, 导致后面搞出来复杂的东西:
vue 框架的诞生, 就是第一种情况孕育出来的畸形产物, 而 vue 框架实际上就是一堆 js 代码的集合, 这些代码做了什么事情呢? 这些代码把后端返回的信息进行解析和重组, 生成新的 html 或者 js 或者 CSS 文件, 这些文件再重新渲染浏览器界面; 后来, 所谓的 vue 服务端渲染, 也就是使用后端的 nodejs 代码写一些服务, 在服务器上把原来要直接返回前端的信息截下来, 然后进行解析和重组, 在服务器上生成新的 html 或者 js 或者 css 文件, 然后提醒前端浏览器下载这些文件, 浏览器下载好了, 再重新加载这些文件, 对浏览器界面重新进行渲染, 这样前端不用再去解析和重组信息了, 但.... 事实往往是更复杂的, 前端的解析和重组部分还是会继续存在, 后端增加了解析和重组模块, 现在, 模块更多了, 可以把工作分的更细了, 呵呵
为了实现上面的操作, 需要是用 nodejs 写出更多的代码来支撑, 这些代码就是 vue.js 服务器端渲染指南
你需要用 npm 安装下面这些中间件, 这些中间件也就是 nodejs 代码的集合, 用来解析和重组处理过的信息, 生成 html 或者 js 或者 css 或者所谓的 "模版" 文件, 在提醒前端浏览器下载, 最后在浏览器中渲染出我们所看到的页面:
vue & vue-server-renderer 2.3.0+ vue-router 2.5.0+ vue-loader 12.0.0+ & vue-style-loader 3.0.0+
说到这里, 上面 vue 这个体系的操作使用方式 已经与入门学习脱离太远了 呵呵
回到目前的项目教程, 我们回归单机开发的思路, 就是完全编写浏览器的 js 代码作为前端, 编写 nodejs 代码作为服务器后端服务
我们现在在设计一个用户管理模块, 设计到用户管理前端页面 和 用户管理后端服务模块
前端页面使用 vue, 使用 js 编写, 这样, 就很明了了, 我们创建两个层次, 一个层次放好服务端的 js 代码和其他服务端的资源和文件, 另一个层次放前端代码, 供客户端浏览器下载, 渲染
创建 server 文件夹 和 client 文件夹, 作用就是上面所说的
安排好文件结构, 当前的文件结构如下
- cd server
- ls
- const serve = require('koa-static');
- const Koa = require('koa');
- const app = new Koa();
- const Router = require('koa-router');
- const router = new Router();
- // $ GET /package.json
- app.use(serve('../client'));
- //
- router.get('/signin', async (ctx) => {
- var mysql = require('mysql');
- var connection = mysql.createConnection({
- host: 'localhost',
- user: 'root',
- password: '88888888',
- database: 'my_db'
- });
- connection.connect(function (err) {
- if (err) {
- console.error('error connecting:' + err.stack);
- return;
- }
- console.log('connected as id' + connection.threadId);
- });
- var response = {
- "name": ctx.query.name,
- "password": ctx.query.password
- };
- var addSql = 'SELECT * FROM ArthurSlogAccount WHERE AccountName=?';
- var addSqlParams = [response.name];
- var datas = await new Promise((resolve, reject) => {
- connection.query(addSql, addSqlParams, function (err, result) {
- if (err) {
- reject(err);
- console.log('[SELECT ERROR] -', err.message);
- return;
- }
- if (result[0].Password == response.password) {
- resolve(result[0]);
- console.log('Welcome~ SingIn Successul ^_^' + '\\' + 'Level:' + result[0].Level + 'Houses:' + result[0].Houses);
- }
- if (result[0].Password != response.password) {
- reject('SingIn Fault ^_^!');
- console.log('SingIn Fault ^_^!');
- }
- });
- });
- if(datas){
- ctx.redirect('account.html');
- }
- connection.end();
- });
- //
- router.get('/signup', async (ctx) => {
- var mysql = require('mysql');
- var connection = mysql.createConnection({
- host: 'localhost',
- user: 'root',
- password: '88888888',
- database: 'my_db'
- });
- connection.connect(function (err) {
- if (err) {
- console.error('error connecting:' + err.stack);
- return;
- }
- console.log('connected as id' + connection.threadId);
- });
- var response = {
- "name": ctx.query.name,
- "password": ctx.query.password,
- "firstname": ctx.query.firstname,
- "lastname": ctx.query.lastname,
- "birthday": ctx.query.birthday,
- "sex": ctx.query.sex,
- "age": ctx.query.age,
- "wechart": ctx.query.wechart,
- "qq": ctx.query.qq,
- "email": ctx.query.email,
- "contury": ctx.query.contury,
- "address": ctx.query.address,
- "phone": ctx.query.phone,
- "websize": ctx.query.websize,
- "github": ctx.query.github,
- "bio": ctx.query.bio
- };
- var addSql = 'INSERT INTO ArthurSlogAccount(AccountName, Password, Firstname, Lastname, Birthday, Sex, Age, Wechart, Qq, Email, Contury, Address, Phone, Websize, Github, Bio) VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)';
- var addSqlParams = [response.name, response.password, response.firstname, response.lastname, response.birthday, response.sex, response.age, response.wechart, response.qq, response.email, response.contury, response.address, response.phone, response.websize, response.github, response.bio];
- ctx.body = await new Promise((resolve, reject) => {
- connection.query(addSql,addSqlParams,function (err, result) {
- if(err){
- reject(err);
- console.log('[INSERT ERROR] -',err.message);
- return;
- }
- resolve('Singup Successful!');
- });
- });
- connection.end();
- });
- app.use(router.routes());
- app.listen(3000);
- console.log('listening on port 3000');
调整部分
- index.js
- // $ GET /package.json
- app.use(serve('../client'));
切换至 server 路径下, 启动静态 web 服务器
node index.js
打开浏览器, 输入 127.0.0.1:3000, 测试一下网站各个功能是否正常
开始编码
至此, 我们重新对文件结构进行调整.
来源: https://www.2cto.com/kf/201808/766287.html