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'

2. 在项目的component路径中创建一个新的组件.
   
3. 在这个实例中, 我们假设要显示两条新闻, 因此我们需要两个div用于显示内容.

<template>
<div class="maincontent">

	<div></div>   <!-- 新闻1 -->
	<br>
	<div></div>   <!-- 新闻2 -->
</div>
</template>

4. import我们需要的axios.

import axios from 'axios'
export default