一个Demo--blog

昨天一天上班摸鱼。。。闲着没事，就写了个小的博客网站。

自己搭框架的时候发现，很多东西自己其实已经忘得差不多了，这里跟大家分享分享一些容易健忘的地方。

技术：Vue + Element-UI + MySQL + Node。

1. 前端：先搭建一个vue项目，vue 项目名这是肯定不能忘记的（前提你先安装好vue-cli3）。 在这里先要去人是否安装好node和npm：

node -v
npm -v  //均出现版本号再安装vue-cli
npm install -g @vue/cli
//创建项目
vue create 项目名

之后安装一些资源包，比如Element-UI。

2. 后端的话，先搭建好express框架或者koa框架，我选择的是express。

这是之前一个中型项目需要的资源包，而现在做的小blog只有增删改查，需要什么就安装什么。其中，config、controllers、models是自己添加的文件夹。config用来配置数据库，controllers是用来对接口进行实际的逻辑操作，models是用来写连接数据库的语句。 3. 连接数据库：在config文件夹下新建dbconfig.js文件，设置连接的数据库信息。

var dbconfig = {
    host:'localhost',
    port:3306,
    database:'blog',
    user:'root',
    password:'password'
}
module.exports = dbconfig

4. 建立正确的数据库表关系。

5. 连接前后端：在前端框架中建立http.js文件，导入axios。在main.js内编辑：

//http.js
import axios from 'axios'
//中间可以配置一些响应拦截
export default axios
//main.js
import axios from './http.js';
Vue.prototype.$axios = axios;

光是配置axios是不够的，此时出现的问题就是跨域。需要在后台的app.js中配置：

//设置跨域请求的允许操作
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Access-Control-Allow-Credentials', 'true');
  next()
})

之前我遇到过，配置了app.js还是会报XMLHTTPRequest错误，这时候你就需要查看你的网址是否一致。前端http://localhost:8080/和后端的http://localhost:3000/的loaclhost是否一致，或者localhost统一成127.0.0.1。除此之外还是报错，就重启几遍即可。

这个小blog具有增删改查的功能，虽然是用来练手的，但是可以帮助大家很好的回顾网站的大家流程，以及对数据库增删改查的实现。

在此，附上我写的案例连接：github.com/ClyingDeng/…

作者：ClyingDeng

链接：https://juejin.cn/post/6844904015268937742

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。