node后台管理系统

16-node(5.11)

nodejs

基于js的后台语言

基于谷歌浏览器这js解析器v8的一个javascript运行环境

node特点

1. 单线程
2. 非阻塞式io
3. 事件驱动

mongodb

操作

mongodb	数据库	集合（collection）	文档document
mysql	数据库	表	字段

---

可视化：robo3t

增：

db.集合名.insert({"key":val});
db.集合名.save({"key":val});
db.集合名.insert([{"key":val},{},{}...]);//一次多条数据插入

查询：

db.集合名.find();//默认查询所有
db.集合名.find({"key":val});//条件查询
db.集合名.find({"key":{$运算符:条件});//
db.集合名.find({"key":{$gte:13});//大于等于13

运算符查询：

大于：$gt	小于：$lt	大于等于：$gte	小于等于：$lte	不等于：$ne

分页

**skip()**用来指定跳过多条数据

**limit()**查询出指定数量的内容

改：

//默认修改一条数据
db.集合名.update({要修改的内容"key":val},{$set:{你要修改的数据"key":newval})

//想要修改多条数据
db.集合名.update({要修改的内容"key":val},{$set:{你要修改的数据"key":newval},{multi:true})

删：

//默认删除所有匹配数据
db.集合名.remove({数据})

//只想删除一条
db.集合名.remove({数据},{justOne:true})

使用node连接mongodb

1.下载：npm install --save mongoose

2.封装：

• 新建db/index.js

• 引用，配置数据库连接信息

• 开始连接并且监听连接是否成功

3.设置数据库schema

4.设置集合

//集合的设置
    // let colvip=mongoose.model("集合",对象)
    //操作的是vip集合，但是不会添加到vip上面，而是会生成一个vips的新集合；
    //解决？？？创建时创建带有s的集合。eg:直接操作vips

let colvip = mongoose.model("tests", userSchema)

mongoose操作mongodb

一、新增

1.新增内容

// 1.设置要新增的哪些内容
let newvip = new colvip({
   
    name: "newname",
    age: "newage"
 })

2.开始新增

//2.开始新增
newvip.save().then((ok) => {
   
	console.log(ok)
})

const Router = require("express");
let express = require("express");
let router = express.Router();

// 引用
let colvip = require("../db/index.js");
router.post("/insert", (req, res) => {
   
    //给数据库新增内容
    // 1.设置要新增的哪些内容
    let newvip = new colvip({
   
            name: "newname",
            age: "newage"
        })
        //2.开始新增
    newvip.save().then((ok) => {
   
        console.log(ok)
    })
    res.send({
    msg: "insert" })
});
//暴露
module.exports = router;

二、查询

let express = require("express")
let router = express.Router()

// 引用
let colvip = require("../db/index.js")
router.get("/find", (req, res) => {
   
        //colvip调用
        colvip.find().then((ok) => {
   
            console.log(ok)
            res.send({
    msg: "find接口", data: ok })
        })
    })
    //暴露
module.exports = router

//查询指定内容
colvip.find({
    name: "newname" }).then((ok) => {
   
    console.log(ok)
    res.send({
    msg: "find接口", data: ok })
});

结合vue

<script>
import {
   getlink} from "@/api/getapi.js"
export default {
   
  data(){
   
    return{
   
      arr:[]
    }
  },
  mounted(){
   
    getlink("/api/find/find").then((ok)=>{
   
      console.log(ok)
      this.arr=ok.data.data
    })
  }
}
</script>

跨域

module.exports = {
   
  devServer: {
   
   open: true,
     proxy: {
   
       '/api': {
   
         target: 'http://localhost:3000/', //对应自己的接口
         changeOrigin: true,
         ws: true,
         pathRewrite: {
   
           '^/api': ''
         }
       }
    }
  }
}

elementui (后台管理插件)

1.下载：npm i element-ui -S

<template>
  <div class="hello">
   <h3 v-for="(v,i) in arr" :key="i">{
   {
   v.name}}----{
   {
   v.age}}</h3>

    <!-- ==================element=========== -->
       
    <el-button type="danger">危险按钮</el-button>

    <el-table
    :data="arr"	==arr为自己的数据匹配==
    stripe
    style="width: 100%">
    //========一列==========
    <el-table-column
      prop="name"	==需要传参==
      label="姓名">	==表头==
    </el-table-column>
    //=========一列==============
     <el-table-column
      prop="age"	==需要传参==
      label="年龄">	==表头==
    </el-table-column>
  </el-table>

  </div>
</template>

<script>
import {
   getlink} from "@/api/getapi.js"
export default {
   
  data(){
   
    return{
   
      arr:[],
    }
  },
  mounted(){
   
    getlink("/api/find/find").then((ok)=>{
   
      console.log(ok)
      this.arr=ok.data.data
    })
  }
}

</script>

原型图工具：墨刀/墨客

node后台管理系统流程

1. 创建vue项目，搭建页面，登录注册首页

2. 创建路由页面，技术栈：vue-cli、 vue-router、路由懒加载、组件页面化、elemuientui、代理跨域

3. 清空脚手架

4. 先完成登录和注册（页面）

注册流程

前台：

1.得到输入框的值

2.把输入框的值按照后台给的接口要求传递过去

3.开始进行传递（前台发送get数据）（代理跨域）

reg(){
   
    // 1.得到输入框的值v-model
    // 2.发出去
    getlink("http://localhost:3000/zhuce/zhuce",	{
   uname:this.inputuser,upwd:this.inputupwd}).then(