vue用户后台管理项目

使用本地数据接口
- 搭建本地数据接口
- 测试本地数据
初始化项目
搭建页面
- 获取本地数据

本文是对视频vue用户后台管理项目的学习的笔记，完整视频指路

https://www.bilibili.com/video/BV1p4411i7JQ/?p=1

完整代码指路我的其他文章

https://blog.csdn.net/weixin_44068203/article/details/105384716

使用本地数据接口

项目需要的数据可以放在数据库中也可以使用本地的数据接口来实现。

本项目使用RESTful,使用json server搭建本地的数据接口，对于本地数据可以进行增删改查

搭建本地数据接口

搜索的时候看到有人写了这个搭建本地数据接口的笔记，指路https://blog.csdn.net/YoSelf_/article/details/100625267

也可以参考这个https://github.com/typicode/json-server

1.根路径下安装全局的json server。命令：
npm install -g json-server

2. 创建一个文件夹，在终端该文件夹目录下初始化package.json文件。命令：
npm init

（其余全部ok就行）

4. 安装模块命令：
npm install json-server --save

5. 将
json-server --watch db.json
复制到package.json中

6. 在当前文件夹下创建一个db.json文件，可以写入该项目需要的本地数据了，例如：

 {
    "users":[
        {
            "name":"aaa",
            "phone":"333",
            "email":"aaa@gmail.com",
            "id":1,
            "age":30,
            "companyId":1
        },
        {
            "name":"bbb",
            "phone":"444",
            "email":"bbb@gmail.com",
            "id":2,
            "age":30,
            "companyId":2
        },
        {
            "name":"ccc",
            "phone":"555",
            "email":"ccc@gmail.com",
            "id":3,
            "age":30,
            "companyId":3
        },
        {
            "name":"ddd",
            "phone":"666",
            "email":"ddd@gmail.com",
            "id":4,
            "age":30,
            "companyId":3
        }
    ]
}

启动json server 命令 npm run json:server

在浏览器输入以上网址可查看本地数据

测试本地数据

使用postman测试本地接口是否成功

（不细写了）

初始化项目

1.安装vue手脚架命令 npm install –global vue-cli

创建项目命令
vue init webpack vcustomers

2.打开项目
npm run dev

因为最新版本的vue-cli已经放弃dev-server.js，只需在webpack.dev.conf.js配置就行（比如改端口）

打开浏览器去指定网址，看到vue的hello页面

3.将不要的东西清掉

在src 中app.vue（将这两行清掉，可以看到页面变成空白页，没有vue.js的hello页）

在这里插入图片描述

4.创建一个组件，是可以跳转的主页

在src compoents中创建customers.vue，about.vue

将hello.vue的东西拷贝过来，将不需要的东西删掉，修改

<template>
  <div class="cuostomers">
    CUSTOMERS
  </div>
</template>

<script>
export default {
  name: 'customers',
  data () {
    return {
     
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>


要想展示这个页面，可以设定路由，点击不同的路由展示不同的页面。
## 安装路由模块
要使用路由，首先要安装路由的模块 cnpm install vue-router --save
再重启一下,
在main.js引入我们的路由模块

```javascript
import VueRouter from 'vue-router'

接下来使用我们的中间件use一下，设置路由

Vue.use(VueRouter)

//设置路由
const router = new VueRouter({
  mode:"history",
  base:__dirname,
  routes:[
    {path:"/",component:customers},
    {path:"/about",component:about},
  ]
})

/* eslint-disable no-new */
new Vue({
  router,
  template: "<div id='app'><router-link to='/about'>关于</router-link><router-view></router-view></div>"
  
     
}).$mount("#app")

搭建页面

使用bookstrap模板，所以在在index.html先把cdn引入进来

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vcustomers</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

接下来就可以使用bookstrapcdn

先来搭建一下导航，在main.js之前的
<router-link to='/about'>关于</router-link>
就不用了，我们要在bookstrap中找一下导航

选好模板后查看源代码，将body中的nav内容拷贝一下

将main.js中router删掉，用nav替换并修改，如下

/* eslint-disable no-new */
new Vue({
  router,
  template: `
  <div id="app">
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar "aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">用户管理系统 </a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li ><router-link to="/">主页</router-link></li>
        <li ><router-link to="/about">关于我们<</router-link>/li>
     
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>
<router-view></router-view>
</div>
`   
}).$mount("#app")

获取本地数据

在主页中我们在tbody中设置数据，用本地的数据，如何请求本地的数据呢，在下面的方法data中设置。

首先启动本地数据
npm run json:server
用vueresource请求到数据，再把数据传到customers中

要安装vuesources 命令
npm install vue-resource --save

重启一下项目，我们在main.js中使用一下vueresource

import VueResource from 'vue-resource'

在customer.vue中去使用

 methods:{
      fetchCustomers(){
          this.$http.get("http://localhost3000/users")
            .then(function(responds){
                console.log(responds);
            })
      }
  },

在main.js中引用

import VueResource from 'vue-resource'

Vue.use(VueResource)

在customers.vue里面加一个调用

 created(){
      this.fetchCustomers();
  }

测试,成功获取

在这里插入图片描述

将控制台打印的代码注释掉

//console.log(responds);
                this.customers = responds.body;

获取到数据，将获取的数据打印出来

<tbody>
            <tr v-for="customers in customers">
                <td>{{customers.name}}</td>
                <td>{{customers.phone}}</td>
                <td>{{customers.email}}</td>
                <td></td>
            </tr>
        </tbody>

查看主页，发现已经有数据打印出来了

在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_44068203/article/details/105381138