修改请求操作以及修改

src/App.vue

@@ -16,4 +16,8 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.newInput{
+  width: 150px;
+}
 </style>

src/commons/api/login.js

+import { sendRequest } from "../http/api.js"
+
+export const login = params => {
+  return sendRequest({
+    url: '/user/info',
+    method: 'post',
+    params
+  });
+}

src/commons/api/userList.js

+import { sendRequest } from "../http/api.js"
+
+export const getList = params => {
+  return sendRequest({
+    baseURL:'https://api.apiopen.top/getJoke',
+    method: 'post',
+    params
+  });
+}

src/commons/http/api.js

@@ -2,29 +2,17 @@
 * 函数的返回值：promise
 * 第一个参数（url），第二个参数（post/get）--字符串*/
 import http from './http'
-
 /**
  * 基础请求
  * @param url 请求路径
  * @param params 请求参数
  * @param method 请求方式: POST(默认)、GET
  * */
-export const sendRequest = (url, params, method) => {
+export const sendRequest = (obj) => {
+
     return new Promise((resolve, reject) => {
         //调用请求方法
-        http({
-            url: url,
-            data: params || {},
-            method: method || 'POST'
-        }).then(res => {
-            // if (res.status === 200) {
-            //     if (res.data.success) {
-            //         resolve(res.data)
-            //     } else {
-            //         reject(JSON.stringify(res.data))
-            //     }
-            // }
-            console.log(res.data.code)
+        http(obj).then(res => {
             if(res.data.code==200){
                console.log("进入这里了")
                resolve(res.data)

src/commons/http/http.js

@@ -5,7 +5,7 @@ import router from '../../router/index'  //引入路由(接口拦截操作)
 
 //所有请求的携带的参数设置
 const http = axios.create({
-  baseURL: '',   // 地址
+  baseURL: 'http://baidu.com',   // 地址
   timeout: 30000
 })
 //设置拦截器
@@ -30,7 +30,7 @@ http.interceptors.request.use(function (config) {
 })
 
 
-http.interceptors.response.use(res => { 
+http.interceptors.response.use(res => {
   //取消表格loading状态
   //store.state.loading = false
   //回调成功（success = false）

src/main.js

@@ -10,10 +10,32 @@ Vue.config.productionTip = false
 
 Vue.use(ViewUI);
 
+
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(m => m.meta.requireAuth)) {
+    // 对路由进行验证
+    if (localStorage.getItem('token')) { // 已经登陆
+      next() // 正常跳转到你设置好的页面
+    } else {
+      // 未登录则跳转到登陆界面
+      next({
+        path: '/login'
+      })
+    }
+  } else {
+    next()
+  }
+})
+
+
+
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
-  components: { App },
+  components: {
+    App
+  },
   template: '<App/>'
 })

src/router/index.js

@@ -8,19 +8,27 @@ import userList from "@/view/user/list.vue" //列表
 Vue.use(Router)
 
 export default new Router({
+  mode:'history',
   routes: [{
-    path: '/',
-    name: 'main',
-    component: Main,
-    children: [{
-        path: '/list',
+      path: '/',
+      redirect: '/login'
+    },
+    {
+      path: '/login',
+      name: "login",
+      component: login,
+    },{
+      path: '/',
+      name: 'main',
+      component: Main,
+      meta: {
+        requireAuth: true
+      },
+      children: [{
+        path: '/user/list',
         name: "userList",
         component: userList,
-      }
-    ]
-  },{
-    path: '/login',
-    name: "login",
-    component: login,
-  }]
+      }]
+    }
+  ]
 })

src/router/menu.js

@@ -3,12 +3,7 @@ const menu = [{
     icon: 'ios-people',
     children: [{
         title: '会员列表',
-        path: '/list',
-        action: 'member-page'
-      },
-      {
-        title: '登录',
-        path: '/login',
+        path: '/user/list',
         action: 'member-page'
       }
     ]

src/view/Main.vue

 <template>
   <div class="layout">
-    <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
+    <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto',backgroundColor:'#20222A' }">
+      <div class="title">
+        <h4>后台管理系统</h4>
+      </div>
       <Menu active-name="1-2" theme="dark" width="auto" :open-names="['1']">
         <Submenu :name="index" v-for="(item,index) in menu" :key="index">
-          <template slot="title">
+          <template slot="title" >
             <Icon :type="item.icon"></Icon>
             {{item.title}}
           </template>
@@ -14,18 +17,18 @@
       </Menu>
     </Sider>
     <Layout :style="{marginLeft: '200px'}">
-      <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
+      <Header :style="{ background: '#fff',borderBottom:'1px solid rgba(0, 0, 0, .1)',height: '50px',lineHeight:'50px'}">
         <Row type="flex" justify="end" align="middle">
           <div class="name">name</div>
-          <Button type="error">退出登录</Button>
+          <Button type="error" size="small" @click="loginOut">退出登录</Button>
         </Row>
       </Header>
       <Content :style="{padding: '0 16px 16px'}">
-        <Breadcrumb :style="{margin: '16px 0'}">
+        <Breadcrumb :style="{margin: '8px 0'}">
           <BreadcrumbItem>{{menu[menuIndex].title}}</BreadcrumbItem>
           <BreadcrumbItem>{{menu[menuIndex].children[menuChildren].title}}</BreadcrumbItem>
         </Breadcrumb>
-          <div style="height:750px">
+          <div class="content">
              <router-view/>
           </div>
       </Content>
@@ -40,7 +43,7 @@
         menu:menus,
         menuIndex:0,
         menuChildren:0,
-        type:0
+        type:0,
       }
     },
     created() {
@@ -52,6 +55,10 @@
       onSelect(index,i){
         this.menuIndex = index
         this.menuChildren = i
+      },
+      loginOut(){
+        localStorage.removeItem('token')
+        this.$router.push('/login')
       }
     }
   }
@@ -62,10 +69,11 @@
 <style scoped>
   .layout {
     border: 1px solid #d7dde4;
-    background: #f5f7f9;
+    background: #e6e6e6;
     position: relative;
     border-radius: 4px;
     overflow: hidden;
+
   }
 
   .layout-header-bar {
@@ -77,4 +85,42 @@
   .name {
     margin-right: 30px;
   }
+  .ivu-menu-dark {
+      background: #20222A;
+  }
+  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
+      border-right: none;
+      color: #fff;
+      background: #2d8cf0!important;
+  }
+
+  .title{
+    height: 50px;
+    text-align: center;
+    line-height:50px;
+    color:#EEEEEE;
+    border-bottom: 1px solid rgba(0, 0, 0, .1);
+  }
+  .content{
+    overflow: auto;
+    height: 750px;
+  }
+  
+  .content::-webkit-scrollbar {
+    width:4px;
+    background-color: #d8d8d8;
+  }
+  
+  /* 滚动槽 */
+  .content::-webkit-scrollbar-track {
+    border-radius:10px;
+  }
+  
+  .content::-webkit-scrollbar-thumb {
+    background-color: #bfc1c4;
+  }
+  
+  .ivu-layout{
+    background-color: #f5f5f5;
+  }
 </style>

src/view/login/login.vue

 <template>
-   <div>
-     <div>
-         list
-     </div>
-   </div>
+  <Row type="flex" justify="center" align="middle" style="height:100vh" class="bgRow">
+    <Card class="cardSize" style="text-align: center;">
+        <h1>后台管理系统</h1>
+        <Form :model="formItem" style="margin-top:10px;" :rules="ruleValidate" ref="formItem">
+          <FormItem prop="number">
+            <Input v-model="formItem.number" placeholder="请输入账号" size="large"></Input>
+          </FormItem>
+          <FormItem prop="password">
+            <Input v-model="formItem.password" type="password" password placeholder="请输入密码" size="large"></Input>
+          </FormItem>
+          <FormItem>
+            <Button type="primary" long size="large" @click="login('formItem')">登录</Button>
+          </FormItem>
+        </Form>
+    </Card>
+  </Row>
 </template>
 <script>
+
+  import { login } from "@/commons/api/login.js"
+
   export default {
-    data(){
+    data() {
       return {
-          test:"我是登录页"
+        test: "我是登录页",
+        formItem: {
+          user:'',
+          password:''
+        } ,//form表单
+        //验证数据
+        ruleValidate:{
+          number:[{ required: true, message: '请输入账号', trigger: 'blur' }],
+          password:[{ required: true, message: '请输入密码', trigger: 'blur' }]
+        }
       }
     },
-    methods:{
-      
+    methods: {
+      login(name){
+
+        // login(this.formItem).then(res=>{
+        //   localStorage.setItem('token','15154848df4s8f4s84sd84s')
+        //   this.$router.push({path:'/user/list'})
+        // }).catch(err=>{
+
+        // })
+
+        this.$refs[name].validate((valid) => {
+            if (valid) {
+                this.$Message.success('Success!');
+                localStorage.setItem('token','15154848df4s8f4s84sd84s')
+                this.$router.push({path:'/user/list'})
+            } else {
+                this.$Message.error('请输入账号和密码');
+            }
+        })
+
+      }
     }
   }
 </script>
 
-<style>
+<style scoped="scoped">
+  .cardSize {
+    padding: 25px 50px 30px 50px;
+    width: 500px;
+  }
+  
+  .bgRow{
+    background-color: #20222A;
+  }
+  
 </style>

src/view/user/list.vue

 <template>
-  <Card >
-    <Table border :columns="columns" :data="list"></Table>
-  </Card >
+  <div>
+    <Card>
+      <Row type="flex" justify="space-between">
+        <Form :model="searchForm" :label-width="40" inline>
+          <FormItem label="昵称" class="ivuFormItem">
+            <Input v-model="searchForm.name" placeholder="请输入昵称" class="newInput"></Input>
+          </FormItem>
+          <FormItem label="ID" class="ivuFormItem">
+            <Input v-model="searchForm.id" placeholder="请输入ID" class="newInput"></Input>
+          </FormItem>
+          <FormItem label="类型" class="ivuFormItem">
+            <Select v-model="searchForm.type" placeholder="请选择类型" class="newInput" clearable @on-clear="clearFun">
+              <Option value="text">文字</Option>
+              <Option value="video">视频</Option>
+              <Option value="img">图片</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="日期" class="ivuFormItem">
+            <DatePicker @on-change="dateChange" type="daterange" placement="bottom-end" placeholder="请选择日期" class="newInput"></DatePicker>
+          </FormItem>
+          <FormItem class="ivuFormItem">
+            <Button type="primary" @click="searchFun">
+              <Icon type="md-search" />
+              搜索
+            </Button>
+          </FormItem>
+        </Form>
+        <div>
+          <Button type="primary">
+            <Icon type="md-add" />
+            添加
+          </Button>
+        </div>
+      </Row>
+
+    </Card>
+    <!-- 列表 -->
+    <Table border :columns="columns" :data="list" class="tab"></Table>
+    <!-- 分页插件 -->
+    <Row class="pageClass">
+      <Page :total="pageInfo.total" :page-size="pageInfo.size" @on-change="pageFun" :current="pageInfo.page" @on-page-size-change="sizeNumFun"
+        show-total show-elevator show-sizer style="background-color: #FFFFFF;" />
+    </Row>
+
+
+    <!-- 弹出操作 -->
+  </div>
 </template>
 <script>
-  import {
-    sendRequest,
-    getImgStream,
-    fileUpload
-  } from '../../commons/http/api'
+  import { getList } from "@/commons/api/userList.js"
   export default {
     data() {
       return {
         list: [],
-        columns: [
-          {
+        columns: [{
             title: '内容',
             key: 'text'
           },
           {
-            title:"作者ID",
-            key:"uid"
+            title: "作者ID",
+            key: "uid"
           },
           {
             title: '作者',
@@ -30,7 +69,24 @@
             title: '时间',
             key: 'passtime'
           },
+          {
+            title: '操作',
+            width: '150',
+            solt:"operate"
+          },
         ],
+
+        //分页
+        pageInfo: {
+          total: 100, //总条数
+          page: 1, //页码
+          size: 10 ,//一页的数量
+          type:"text"
+        },
+
+        //搜索
+        searchForm: {}
+
       }
     },
     created() {
@@ -39,20 +95,68 @@
     methods: {
       //示例
       getList() {
-        sendRequest('https://api.apiopen.top/getJoke?page=1&count=5&type=text').then(res => {
-          console.log("POST请求")
+        this.pageInfo.count = this.pageInfo.size //实例接口操作
+        getList(this.pageInfo).then(res => {
           this.list = res.result
-        }).catch(err => {
-          console.log(err)
+        }).catch(err=>{
+          console.log('错误',err)
         })
-      }
+      },
+
+
+      //下拉框清除操作
+      clearFun(){
+         this.searchForm.type = "text"
+      },
+
+      //搜索
+      searchFun(){
+        this.pageInfo.page = 1   //重置分页
+        let obj =  Object.assign(this.pageInfo,this.searchForm) //合并对象，将搜索的内容合并与分页
+        this.pageInfo = obj  //再赋值与分页infor
+        this.getList()
+      },
+      //翻页操作
+      pageFun(pageIndex) {
+        this.pageInfo.page = pageIndex
+        this.getList()
+      },
+      //切换条数
+      sizeNumFun(size) {
+        this.pageInfo.size = size
+        this.pageInfo.page = 1 //切换后将返回第一页
+        this.getList()
+      },
+      //时间选择器
+      dateChange(date){
+        console.log(date[0]) //起始时间
+        console.log(date[1]) //终止时间
+      },
+
     }
   }
 </script>
 
 <style>
-  img{
+  img {
     width: 100px;
-    height:200px;
+    height: 200px;
+  }
+
+  .tab {
+    margin-top: 10px;
+    background-color: #FFFFFF;
+  }
+
+  .pageClass {
+    background-color: #FFFFFF;
+    padding: 16px 16px;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    background-color: #FFFFFF;
+  }
+  .ivuFormItem{
+    margin-bottom: 0;
   }
 </style>