Vue.js+Node.js+MySQL的前后端+数据库系统结构

前言: 大三暑假回国实习, 经过了1个月时间的培训学习, 本人渐渐熟悉了实习的工作环境和节奏.
由于我所在的前端APP研发部门使用的是Vue.js框架, 因此我在被分配**[公司官方网站的重制]**任务后, 研究并应用了这个以:

Vue.js为前端, Node.js为后端, MySQL为数据库的总体结构.
希望为有类似开发需求的同学提供可参考的例子.

文章字数: ~1600字
阅读时间: ~15分钟

使用到的相关工具:

  • Webstorm 开发工具
  • npm 和 node 下载安装
  • MySQL 下载安装
  • Chrome 浏览器

结构示意图:

用我的Thinkpad X1 Yoga画的图
在这里插入图片描述

结构说明:

我所做的当前页面为: [资讯中心], 即显示本公司希望放到官网上的新闻资料 . 当本页面被加载后, 发生的事件为:

  1. 后端启动, 连接MySQL数据库, 发送获取数据库内容请求, 并保存到服务器中;
  2. 前端连接后端, 并发送GET的请求;
  3. 后端将服务器中的数据发送给前端;
  4. 前端将收到的response(日期, 标题, 内容, 等)分组处理后, 显示在浏览器中.

前端Vue.js的设置:

  1. 使用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'
  1. 在项目的component路径中创建一个新的组件.
    图片来源: 本人微信公众号
  2. 在这个实例中, 我们假设要显示两条新闻, 因此我们需要两个div用于显示内容.
<template>
<div class="maincontent">

	<div></div>   <!-- 新闻1 -->
	<br>
	<div></div>   <!-- 新闻2 -->
</div>
</template>
  1. import我们需要的axios.
import axios from 'axios'
export default {
  1. 在data中, 我们需要设置好新闻的各项要素array, 新闻一般需要: 日期, 标题, 内容, 和配图.
<script>
export default {
	name: "example",
	data () {
		return {
		dates: [],
		titles: [],
		contents: [],
		images: []
		}
	}
}
</script>
  1. 接下来我们需要考虑: 什么时候来向后端发送GET的请求? 这里我选择使用mounted(), (关于Vue.js的工作周期相关的内容应该需要日后专门总结梳理一遍, 这里就先使用mounted, 因为…it works !) .
//与name, data(){}平行的mounted
mounted() {
	/*循环两次, 因为上面我们只有两则新闻*/
	for(let i = 0; i < 2; i++){
	axios
		//先发送get的请求到 localhost:3000
		//得到后端传来的response后, 将response的各个部分分别push到第6步的array里面.
		.get("http://localhost:3000")
		.then(response => (
			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),
		))
	}
}
  1. 最后, 我们选择将第一则新闻的标题, 和第二则新闻的内容展示在页面里 作为最后demo的结果展示.
<template>
<div class="maincontent">

	<div>{{titles[0]}}</div>   <!-- 新闻1 -->
	<br>
	<div>{{contents[1]}}</div>   <!-- 新闻2 -->
</div>
</template>

后端Node.js的设置:

  1. 使用webstorm新建一个Node.js的项目, 并在terminal中运行指令:
    npm install mysql
  2. 在app.js文件的最上方加入:
var mysql = require('mysql');

var app = express(); 下方开始配置我们需要的相关功能.

  1. 首先连接到MySQL数据库.
var app = express();
//声明连接数据库的相关信息
var connection = mysql.createConnection({
	host: '127.0.0.1',
	port: '3306',
	user: 'root',
	password: 'root',
	database: '你自己的数据库名称'
});
//开始连接
connection.connect();
  1. 连接完成后, 后端需要向数据库发送获取数据的请求.
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);
});
  1. 服务器收到数据并存储后, 服务器端口处于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数据库:

数据库的内容大致如下:
在这里插入图片描述
可以看到, 数据库中:
第一条新闻的标题为: 物联网大时代数据下…,
第二条新闻的内容为: 姑苏三月, 沃旭通讯…, 现在我们可以试试项目的成果了!

Demo:

  1. 首先运行后端: node app.js
  2. 后端运行成功后, 运行前端: npm run dev
  3. 打开前端的网址: localhost:8080, 查看结果:
    在这里插入图片描述
    可以看到, 与我们预期的要求一致.

待解决的问题:

前端得到response消息并push进data的各个array之后, dates[]的日期内容不仅仅显示为 2019-04-25, 后面还带有timestamp 时间戳, 类似于T04:00:00.000Z这样的格式.

暂时不知道怎么去除. 知道的同学麻烦留言讨论一下, 谢谢!

以上内容为本人原创, 如果有任何错误, 或者有需要解释的问题, 欢迎留言评论, 很乐意一起讨论Vue.js相关的问题!

本公众号中的文章用于计算机相关行业的学习讨论使用, 仅供参考. 禁止任何非法的盗取和商用行为.

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页