Yesterday was a day at work fishing… Nothing idle, just write a small blog site. When I build the frame, I find that I have almost forgotten many things. Here I share with you some easy places to forget. Technology: Vue + element-UI + MySQL + Node.

  1. Front end: Build a VUE project first, the name of the VUE project is not to forget (if you have installed vuE-CLI3 first). Check whether node and NPM are installed:
Node -v NPM -v // Install vue-cli NPM install -g@vue /cli // Create a project vue create the project nameCopy the code

Then install some resource packs, such as Element-UI. 2. For the back-end, first set up the Express framework or KOA framework, I choose Express.


var dbconfig = {
    host:'localhost'.port:3306.database:'blog'.user:'root'.password:'password'
}
module.exports = dbconfig
Copy the code
  1. Establish the correct database table relationships.
  2. Connect the front and back ends: Create an HTTP. js file in the front end framework and import axiOS. Edit in main.js:
//http.js
import axios from 'axios'
// Some response interception can be configured in the middle
export default axios


//main.js
import axios from './http.js';

Vue.prototype.$axios = axios;
Copy the code

It’s not enough to configure AxiOS, where the problem is cross-domain. Need to be configured in background app.js:

// Set the allowed action for cross-domain requests
app.all(The '*'.function (req, res, next) {
  res.header('Access-Control-Allow-Origin'.The '*');
  res.header('Access-Control-Allow-Headers'.'Content-Type,Authorization');
  res.header('Access-Control-Allow-Methods'.The '*');
  res.header('Access-Control-Allow-Credentials'.'true');
  next()
})
Copy the code

I’ve encountered an XMLHTTPRequest error when app.js is configured, so you need to check if your url is consistent. Check whether the loaclhost values of front-end http://localhost:8080/ and back-end http://localhost:3000/ are the same, or whether the localhost values are 127.0.0.1. In addition to the error, just restart a few times. This small blog has the function of adding, deleting, changing and checking, although it is used to practice, but it can help you to review the website process, as well as the realization of the database adding, deleting, changing and checking. Here, attached is my case link: github.com/ClyingDeng/…