使用nuxt,express,mysql,nginx创建个人博客系列-04

171
2020-01-24 18:37
1 年前

mac安装mysql(两种方法)

如果安装不成功,我这里提供一篇别人的安装教程简书教程

window安装mysql

  • Window上安装Mysql相对来说会较为简单,你只需要在 MySQL 下载中下载window版本的mysql安装包,并解压安装包。双击 setup.exe 文件,接下来你只需要安装默认的配置点击"next"即可,默认情况下安装信息会在C:\mysql目录中。

(tips:安装mysql这个环节一笔带过了,因为这方面的知识有很多,大家自行搜索和摸索)


下面我来讲一下如何使用node链接mysql,其实这个东西随便网上找一下一大片,我就随便讲讲如何使用操作mysql吧。

首先你需要安装mysql模块(npm install mysql)mysql github 地址 安装body-parser模块(npm install body-parset)body-parser github 地址

进入之前blog项目,找到server/api目录,在此目录下创建test.js,再在page目录下创建个test目录并且在里面创建个index.vue,我会在这里讲解一下mysql操作,首先我们创建一个数据库,然后创建一个user表用来测试

mysql -u 用户名 -p (回车)
Enter password
只要用户名和密码正确就能进入,
创建test数据库
create database test;
选择test数据库
use test;
创建user 表
CREATE TABLE `user` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(64) NOT NULL DEFAULT '',
  `sex` enum('1','2') NOT NULL DEFAULT '1' COMMENT '1男,2女',
  `height` int(11) NOT NULL DEFAULT '0',
  `weight` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

这里是server/index.js,添加以下内容


import bodyParser from 'body-parser' // 引入body-parser模块处理请求,

let jsonParser = bodyParser.json({
  limit: '50mb'
})

let urlPaser = bodyParser.urlencoded({
  extended: true,
  limit: '50mb'
})

// Import API Routes
app.use('/api',jsonParser,urlPaser, api)

这里是page/test/index.vue代码

<template>
  <div>
    <h1>列表</h1>
    <ul>
      <li v-for="(item,index) in data.user_list" :key="index">
        {{item}}
      </li>
    </ul>
    <h2>插入</h2>
    <div>
      <input type="text" v-model="name" placeholder="姓名">
      <br/><input type="radio"  value="1" v-model="sex"><input type="radio"  value="2" v-model="sex">
      <br/> 
      <input type="text" v-model="height" placeholder="身高">
       <br/> 
      <input type="text" v-model="weight" placeholder="体重">
      <br/> 
      <div @click="test">插入</div>
    </div>
  </div>
</template>
<script>
import axios from '~/plugins/axios'
export default {
  asyncData(){
    return axios.get('/api/test').then((res)=>{
      return {data:res.data}
    }).catch((e) => {
        error({ statusCode: 404, message: 'Test not found' })
      })
  },
  data(){
    return {
      name:"",
      height:0,
      weight:0,
      sex:1,
    }
  },
  methods:{
    test(){
      let {name,height,weight,sex} = this;
      axios.post('/api/test/createUser',{
        name,
        height,
        weight,
        sex
      }).then(resp=>{
        if(resp.data.status==1){
          window.location.reload();
        }
      })
    }
  }

}
</script>

这里是server/api/index.js,


import { Router } from 'express'

import users from './users'
import test from './test'
const router = Router()

// Add USERS Routes
router.use(users)
router.use('/test',test)

export default router

这里是server/api/test.js,

import { Router } from 'express'
import mysql from 'mysql'
const router = Router()
router.get('/', (req,res,next)=>{
  let connection = mysql.createConnection({     
    host     : 'localhost',       
    user     : 'root',              
    password : '',       
    port: '3306',                   
    database: 'test', 
  });
  connection.connect();
  connection.query('select * from user',function(error, results, fields){
    if (error) throw error;
    return res.send({
        user_list:results
    })

  });
  connection.end();
})
router.post('/createUser',(req,res,next)=>{
  let {body} = req;
  let connection = mysql.createConnection({     
    host     : 'localhost',       
    user     : 'root',              
    password : '',       
    port: '3306',                   
    database: 'test', 
  });
  connection.connect();
  connection.query('insert into user set ?',body,function(error,results,fields){
    if (error) throw error;
    if(results.affectedRows === 1){
      return res.send({
        status:1
      })
    }else{
      return res.send({
        status:0,
        msg:"插入失败"
      })
    }

  })
  connection.end();

})

export default router

打开浏览器http://127.0.0.1:3002/test即可看到以下页面

test页面


上一篇-使用nuxt,express,mysql,nginx创建个人博客系列-03
下一篇-使用nuxt,express,mysql,nginx创建个人博客系列-05