This article shows you how to easily configure the functional architecture of the system design so that development is not difficult, and you can CV the rest.

01 preface

If nothing unexpected, you should also be at home learning (fish), but I still advise you, the new storm has appeared, how to stay still… It seemed to ring a bell. Anyway, now is the most busy time for the senior dog, and we should also take advantage of this period of time to consolidate their knowledge, and strive to make a decent project in one or two months, so as to give their university an account.

After all, a good project can be put on your resume, and if you’re not careful, you might get a good offer from it. So this article is a guide for those kids who are still confused and I hope you can make a project of your own. I am well aware of your difficulties, because I was also suffering from this kind of system design problem before, and I found many sources of information, so I think sharing is the best reward for our programmers.

Recently I am also doing related things, but the tutor gives you a new demand. What else can we do? Just do it. This time I added a new background management system, convenient management personnel operation, toss a night plus a morning, tried several schemes are not satisfied, now I will put their own pit and problems are said, for everyone to fill the pit. I use a combination of the open source project Vue + Element-UI +mysql+ Node + Express.

02 Open Source management system

You should be familiar with the current front-end framework vUE, which is basically one of the must-learn frameworks if you are in the front-end industry. This framework is recommended because it is relatively easy to get started, friendly to beginners, and the ecology is perfect, there are countless programmers to solve your problems every day, this is the benefits of ecology. Well, without further ado, the next is to recommend two good open source projects.

  • vue-element-admin

This is a relatively large background management system, including a lot of things and functions, if you are a novice, it may not hold, after all, his project is relatively perfect, but fortunately, there are perfect documents. Feel free to check it out for yourself, and of course you can study how the architecture levels are designed. Usually when you’re learning a new technology, it’s helpful to look at other people’s existing projects. After all, it took a lot of hair to develop a great system for young programmers.

  • Ant Design Pro

This is a background management system produced by Ant Financial, which is also a very good template project. It can be done out of the box, with a beautiful interface and detailed documentation, which can be read at home and travel. As above, this is also a huge framework, because there are many integrated functions, but you can also take a look inside the architecture is how to design, I believe you will have a very good harvest.

However, you should not directly use it as a graduation project, but to say a more realistic word, many university lecturers will not pay attention to the development of the Internet, and some still teach you to use jQuery, think about it all feel terrible. It is normal for teachers not to know the template mentioned above. Therefore, students must pay attention to the development of the Internet, especially the front end, and it is normal to update a new technology every three times.

I believe that many colleges and universities should not teach you these things and technology, also did not recommend you to look at the open source project is very good, basically are C language, C ++, Java, JSP and other programming languages to learn the entry-level, but let’s not talk about this.

Some of them are combined with bootstrap. You can also take a look at them. But now the mainstream is using the Element-UI and Ant-Design component libraries, so we go with the flow.

03 Start from scratch

It’s starting from scratch, but you also have to have a JS base, a command line base, you know what Node and NPM and all that stuff is. You can go to the official website to install vUE first and use their scaffolding vuE-CLI to build a project. This process is relatively simple, you only need a few commonly used commands to implement. But this time I used an open source project on Github because I didn’t have to configure it myself (because I was lazy). Check the address

The next step is how to write your own interface, connect to the mysql database, and return data through the front-end call, which is not fake data, but real data.

Before starting, you need to clone the project and perform NPM I to install its dependencies.

If your network is not very good, you can switch to the taobao’s mirror image source address, just behind the command plus – registry = HTTPS: / / registry.npm.taobao.org. Domestic is relatively faster, also not easy to go wrong, if you do not add the word may be installed failure. The following is an example:

npm install --registry=https://registry.npm.taobao.org
Copy the code

Then you need to install the following dependencies:

NPM install axios --save (Enter, this is how the request is sent) NPM install mysql --save (Enter, NPM install body-parser --save NPM install body-parser --saveCopy the code

We can then add axios to the vue prototype under main.js for easy invocation.

import axios from 'axios';
Vue.prototype.$axios = axios // Global register, using this.$axios
Copy the code

04 database

Database we choose is the relational database mysql, visualization tool is NavICat.

To start with, you can create a folder named server under the SRC directory. This folder is used to store database configuration and database connection code.

Create several files in the folder to store configuration, connection, and other related content. Why so many? The reason is the decoupling problem we mentioned earlier, to minimize the coupling. It is convenient to modify and update the interface in the future, otherwise it will be very tedious if you write it all in a file.

  • Api.js is used to configure interfaces that you call later to return the corresponding database data
  • Sqlmap.js is used to write some SQL statements, which is the actual implementation of the above interface
  • Router. js Indicates interface routing
  • Index.js here is the total export file, which is a simple HTTP service

The next step is to write each file

api.js
const mysql = require('mysql');
const sqlMap = require('./sqlMap');
// Create a link object
const pool = mysql.createPool({
    host: '47.98.151. XXX'.user: 'root'.port: 3306.password: 'XXX'.database: 'design'.multipleStatements: true    // multi-statement query
})

module.exports = {
    getValue(req, res, next) {
      pool.getConnection((err, connection) = > {
        varsql = sqlMap.getValue; connection.query(sql, (err, result) => { res.json(result); connection.release(); }}})})Copy the code
sqlMap.js
var sqlMap = {
  getValue: 'SELECT * FROM test; '
}
module.exports = sqlMap;
Copy the code
router.js
const express = require('express');
const router = express.Router();
const api = require('./api');

router.get('/getValue', (req, res, next) => {
  api.getValue(req, res, next);
});

module.exports = router;
Copy the code
index.js
const routerApi = require('./router');
const bodyParser = require('body-parser'); // Post data is required
const express = require('express');
const app = express();

app.use(bodyParser.json());

// Back-end API routing
app.use('/api', routerApi);

// Listen on the port
app.listen(3000);
console.log('success listen at port:3000...... ');
Copy the code

After completing the above code, you can execute it in the server directory. Nodeindex. js starts the service, which listens on port 3000.

05 Front-end Files

Then we can test any file we just created helloWorld.vue, write a click event, and implement the request in methods.

<template> <div class="home"> < p@click ="go"> </p> </div> </template> <script> export default {data() {return {}}, methods: { go() { this.$axios.get('/api/getValue', { params: {} }).then( (res) => { console.log('res', res); }) } } } </script>Copy the code

Otherwise, this will be an error when you run the vUE project.

Because we just said that your server is listening on port 3000, but your VUE project is listening on port 8080, which is not true. Dev proxyTable = dev proxyTable = dev proxyTable = dev proxyTable = dev proxyTable = dev proxyTable = dev proxyTable = dev proxyTable = dev proxyTable

dev: {
    env: require('./dev.env'),
    port: process.env.PORT || 8080.autoOpenBrowser: true.assetsSubDirectory: 'static'.assetsPublicPath: '/'.proxyTable: {
      '/api': {
        target: 'http://localhost:3000/api'.changeOrigin: true.pathRewrite: {
          '^/api': ' '}}},Copy the code

This code means that any request starting with API is directed to target. So once you’ve configured it and recompiled it, you should be able to return the data correctly. When I click on the home page, I send the request and return the data without a problem.

Also note:

If you want to request local JSON data, I have found that you must place it in the static directory, otherwise it will not be available. But we also usually need to use online data, or connect to your local database.

06 summary

I have to say that code has to be typed frequently, otherwise over time you will forget a lot of things, and also a lot of configuration. Net.createconnection is not a function when I call mysql directly. Later I realized that it is not mysql but node itself. You need a service to access data related content.

Here we also recommend you to take a look at node related technology, as well as Express and KOA2, etc., can easily build background and write interface, these are web framework, details we can also go to the official website to see, there are many entry-level tutorials, worth learning. After all, Now Node has come into everyone’s view, just like the previous words, it is business that makes people, driving your growth.

Ok, that’s all for this article. The article will be sent to the wechat public account “Front-end Hour”. Welcome to pay attention to it. Come on, everybody!

Refer to the article

  • Segmentfault vue + + mysql node set up personal blog (a) segmentfault.com/a/119000001…