Vue.js+Node.js+MySQL的前后端+数据库系统结构 |
您所在的位置：网站首页 › 前端使用什么技术操作数据库 › Vue.js+Node.js+MySQL的前后端+数据库系统结构 |
Vue.js+Node.js+MySQL的前后端+数据库系统结构
|
前言: 大三暑假回国实习, 经过了1个月时间的培训学习, 本人渐渐熟悉了实习的工作环境和节奏. 由于我所在的前端APP研发部门使用的是Vue.js框架, 因此我在被分配**[公司官方网站的重制]**任务后, 研究并应用了这个以: Vue.js为前端, Node.js为后端, MySQL为数据库的总体结构. 希望为有类似开发需求的同学提供可参考的例子. 文章字数: ～1600字 阅读时间: ～15分钟 使用到的相关工具: Webstorm 开发工具npm 和 node 下载安装MySQL 下载安装Chrome 浏览器 结构示意图:用我的Thinkpad X1 Yoga画的图 我所做的当前页面为: [资讯中心], 即显示本公司希望放到官网上的新闻资料 . 当本页面被加载后, 发生的事件为: 后端启动, 连接MySQL数据库, 发送获取数据库内容请求, 并保存到服务器中;前端连接后端, 并发送GET的请求;后端将服务器中的数据发送给前端;前端将收到的response(日期, 标题, 内容, 等)分组处理后, 显示在浏览器中. 前端Vue.js的设置: 使用webstorm新建一个Vue.js的项目, 并在terminal运行: npm install npm install --save axios 备注: 在安装完任何npm install的命令后, 都最好运行一次npm install来更新检查一下package.json的文件 在main.js文件的最上方 引入 axios的相关模块. import Vue from 'vue' import App from './App' import axios from 'axios' 在项目的component路径中创建一个新的组件. 在这个实例中, 我们假设要显示两条新闻, 因此我们需要两个div用于显示内容.
import我们需要的axios.
import axios from 'axios'
export default {
在data中, 我们需要设置好新闻的各项要素array, 新闻一般需要: 日期, 标题, 内容, 和配图.
export default {
name: "example",
data () {
return {
dates: [],
titles: [],
contents: [],
images: []
}
}
}
接下来我们需要考虑: 什么时候来向后端发送GET的请求? 这里我选择使用mounted(), (关于Vue.js的工作周期相关的内容应该需要日后专门总结梳理一遍, 这里就先使用mounted, 因为…it works !) .
//与name, data(){}平行的mounted
mounted() {
/*循环两次, 因为上面我们只有两则新闻*/
for(let i = 0; i (
this.dates.push(response.data[i].dates),
this.titles.push(response.data[i].titles),
this.contents.push(response.data[i].contents),
this.images.push(response.data[i].pictures),
))
}
}
最后, 我们选择将第一则新闻的标题, 和第二则新闻的内容展示在页面里 作为最后demo的结果展示.
{{titles[0]}}
{{contents[1]}}
后端Node.js的设置:
使用webstorm新建一个Node.js的项目, 并在terminal中运行指令: npm install mysql在app.js文件的最上方加入:
var mysql = require('mysql');
在var app = express(); 下方开始配置我们需要的相关功能. 首先连接到MySQL数据库. var app = express(); //声明连接数据库的相关信息 var connection = mysql.createConnection({ host: '127.0.0.1', port: '3306', user: 'root', password: 'root', database: '你自己的数据库名称' }); //开始连接 connection.connect(); 连接完成后, 后端需要向数据库发送获取数据的请求. connection.connect(); //得到news表格中的所有数据的sql语句 var getSql = 'SELECT * FROM news'; //用于存储结果的空string var str = ''; connection.query(getSql, function(err, result){ //如果发生错误, 将错误显示在console中 if(err) console.log('SELECT ERROR: ' + err); //如果没有错误, 将MySQL返回的result转化成 web应用传输的JSON格式, 并储存于str中. str = JSON.stringify(result); }); 服务器收到数据并存储后, 服务器端口处于listen的状态, 我们需要给GET一个api, 这样当收到前端发送的GET请求时, 我们的服务器才知道自己要做什么. //GET的api, 路径为 'http://localhost:3000/', req 为接收到的request请求, res为要传回的result app.get('/', function (req, res) { //设置res的头文件, 用于解决axios的跨域问题 res.setHeader("Access-Control-Allow-Origin", "*"); //发送服务器存储的str res.send(str); }); app.listen(3000, function (){ console.log("Server running at 3000 port"); });注意, 前后端交互时 一定要设置res回传结果的header, 否则会跨域报错 MySQL数据库:数据库的内容大致如下:  可以看到, 与我们预期的要求一致.
待解决的问题:
前端得到response消息并push进data的各个array之后, dates[]的日期内容不仅仅显示为 2019-04-25, 后面还带有timestamp 时间戳, 类似于T04:00:00.000Z这样的格式. 暂时不知道怎么去除. 知道的同学麻烦留言讨论一下, 谢谢! 以上内容为本人原创, 如果有任何错误, 或者有需要解释的问题, 欢迎留言评论, 很乐意一起讨论Vue.js相关的问题! 本公众号中的文章用于计算机相关行业的学习讨论使用, 仅供参考. 禁止任何非法的盗取和商用行为. |
可以看到, 数据库中: 第一条新闻的标题为: 物联网大时代数据下…, 第二条新闻的内容为: 姑苏三月, 沃旭通讯…, 现在我们可以试试项目的成果了!【本文地址】
今日新闻 |
推荐新闻 |