Full stack - the most simple list management (vue + express + mysql)

Full stack - the most simple list management (vue + express + mysql)

This is a simple list management

Source Download Link:
** GitHub URL: ** Brands

Map:

Brands have a database table, the following structure, id is set to auto-increment:

name	Types of	length	Decimal point	Allow null values	Primary key
id	int	10	0		Primary key
name	varchar	100	0
newDate	varchar	200	0

Specific steps:

The back-end - there are two documents, app.js and router.js. Each server is responsible for creating and implementing routing functionality. app.js as the startup file.

1. First, create a server installation express introduced body-parsermodules and bind, for receiving the data submitted by the post;

   app.use(bodyParser.urlencoded({ extended: false }))    
   app.use(bodyParser.json())
   

2. Creating router.js file, used to bind the routing function.

   var router = express.Router()
   

3. router.js introduced file mysqlmodule, database operation.

4. Create a connection, connect to the database, note that this database user name, password, and database name must be right, not to write the name of the database table name;

   //创建连接
   var connection = mysql.createConnection({
     host: 'localhost',
     user: 'root',
     password: '123456',
     database: 'brand'
   });
   //连接数据库
   connection.connect();
   

5. Implementing routing functionality, and through the res.jsonresponse json data format to achieve the interface. Just to name add data routing interface.

   router.get('/getprodlist',function(req, res){  //获取数据
     connection.query('SELECT * FROM brands', function (error, results, fields) {
       if (error) res.json({status:400, message:'获取数据失败'});
       res.json({status:200, message:results});
     });
   })
   router.post('/addproduct', function(req, res){  //添加数据
     sqlStr = 'INSERT INTO brands SET ?'
     connection.query(sqlStr, req.body, function(error){
       if(error) throw error;
       res.json({status:200, message:'保存数据成功'});
     })
   })
   router.get('/delproduct', function(req, res){  //删除数据
     connection.query('DELETE FROM brands WHERE id='+req.query.id, function(error){
       if(error) return res.json({status:400, message:'删除数据失败'});
       res.json({status:200, message:'删除数据成功'});
     })
   })
   

6. To solve cross-domain issue, set in app.js in.

   app.all('*', function(req, res, next) {
     res.header("Access-Control-Allow-Origin", "*");
     res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
     res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
     res.header("X-Powered-By",' 3.2.1')
     res.header("Content-Type", "application/json;charset=utf-8");
     next();
   });
   

So that we can use the interface. Since 3000 we listening port. This time we can visit: localhost: 3000 / getprodlist

Interface to view the data. It can be implemented to add some data in the database, to facilitate testing.

If you can view the data, it shows that our interface is complete. Next we went to the front-end functionality can be achieved.

The front - only a index.html file

1. We introduce bootstrap ui interface components are built.

2. js as we vue.js and vue-resource.js, pay attention to the introduction of the package of the order.

3. Root global configuration data interfaces.

   Vue.http.options.root = "http://localhost:3000/";
   

4. Add in some fake data in the data view interface effects, by v-for the rendering of list data to the page. Do not forget to set the key.

   <tr v-for="item in search(keywords)" :key="item.id">
           <td>{{ item.id }}</td>
           <td>{{ item.name }}</td>
           <td>{{ item.newDate}}</td>
           <td><a href="#" @click.prevent="del(item.id)">删除</a></td>
   </tr>
   

5. getList call interface methods to obtain data by way of get.

   getList(){
     this.$http.get("getprodlist").then(result=>{
         if (result.body.status == 200){
            this.list = result.body.message;
         }else{
            alert("数据库连接失败");
         }
     })
   },
   

6. add method, the data submitted by post call interface.

   add(){
      var date = new Date();
      this.$http.post("addproduct",{
      name:this.name, 
      newDate:date.toString()
      },
      {emulateJSON:true})
      .then(result=>{
         if (result.body.status == 200){
            this.getList();
            this.name = "";
         }else {
            alert("连接服务器失败");
         }
       })
   },
   

7. del (id) method, a get method, passing id parameter, based on the id call interface and delete data.

   del(id){
      this.$http.get("delproduct?id=" + id).then(result=>{
         if (result.body.status == 200){
             this.getList();
         }else{
             alert("数据库连接失败");
         }
      })
   },
   

8. search filter data list, the list to achieve search function.

   search(keywords){
      return this.list.filter(ele=>{
              if(ele.name.indexOf(keywords)!=-1||ele.id.toString().indexOf(keywords)!=-1)
                   return true;
      })
   }