前端项目Vue（下）

启动vue项目：npm run dev

前后端分离（前端）前端项目Vue（下）

1.配置router下的index.js文件(相当于配置URL)

import Vue from 'vue'
import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'
import Index from '@/components/Index'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/hello',
      name: '',
      component: HelloWorld
    },
    {
      path: '/',
      name: '',
      component: Index
    }
  ]
})

2.在components下创建组件

2.1开启跨域

此时由于跨域的问题访问不到后端的数据，一共有三种方式

后端controller层中添加注解@CrossOrigin // 同源策略，可以实现后端解决跨域的问题不推荐

前端在config.index.js文件中开启跨域

proxyTable: {
      '/api':{
        target: 'http://localhost:8888/',
        changeOrigin: true,     //  开启跨域
        pathRewrite: {
          '^/api': "/"
        }
      }
    },

使用Nginx解决跨域问题

2.2通过ajax的方式在组件中异步请求数据

原生ajax请求数据
jquery的ajax获取数据
vue的ajax获取数据
- 安装axios和vue-axios 安装命令：npm install axios 与 npm insatll vue-axios
- 在main.js中引入，在项目模块中使用模板
- 在Index.vue中引入axios模板

Index.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{users}}</p>
<!--    <input type="button" @click="clickme()" value="click me">-->

  </div>
</template>

<script>
// 3.引入axios模板
  import axios from 'axios'

export default {
  name: 'users',
  data () {
    return {
      msg: 'this is all users',
      users: []
    }
  },
  methods:{

    getAllUsers:function () {

      //一、原生ajax获取后端数据
      // var xhr = new XMLHttpRequest();
      //
      // xhr.open("GET", "api/user/getAll", true);
      //
      // xhr.send();
      //
      // var _this = this;
      //
      // xhr.onreadystatechange = function (){
      //   if(xhr.status == 200 && xhr.readyState == 4){
      //     alert(xhr.responseText)
      //
      //     _this.users = eval(xhr.responseText);
      //   }
      // }



     //二、vue的ajax异步获取后端数据
      // 1.安装axios和vue-axios
      // 2.在main.js中引入，在项目模块中使用模板
      var _this = this;
      axios.get("api/user/getAll").then(res => {
        console.log(res.data);
        _this.users = res.data;
      })
      //

    }

  },

  mounted() {
    this.getAllUsers();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

实现效果

前后端分离（前端）前端项目Vue（下）

3.使用Element组件模板美化页面

官网：https://element.eleme.io/#/zh-CN/component/menu

安装Element：npm i element-ui -S

在main.js中进行配置

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

套用组件模板美化页面

<template>

  <el-table
    :data="users"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="用户id"
      width="150">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码"
      width="120">
    </el-table-column>
    <el-table-column
      prop="nickname"
      label="昵称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
      width="300">
    </el-table-column>
    <el-table-column
      prop="picture"
      label="头像"
      width="120">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  // 3.引入axios模板
  import axios from 'axios'

  export default {
    name: 'users',
    data () {
      return {
        users: []
      }
    },
    methods:{

      getAllUsers:function () {
        //二、vue的ajax异步获取后端数据
        // 1.安装axios和vue-axios
        // 2.在main.js中引入，在项目模块中使用模板
        var abc = this;
        axios.get("api/user/getAll").then(res => {
          console.log(res.data);
          abc.users = res.data;
        })


      }

    },

    mounted() {
      this.getAllUsers();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

效果

前后端分离（前端）前端项目Vue（下）

点击查看进入详情修改页

<template slot-scope="scope">
  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
  <el-button type="text" size="small">编辑</el-button>
</template>

//点击查看获取id 传递给修改组件
handleClick(row) {
  alert(row.id);
  console.log(row);
  this.$router.push({name:"UpdateUser",params: {id:row.id}});
}

UpdateUser.vue

注意：方法methods不是method否则报错

<template>

  <el-form :label-position="labelPosition" label-width="80px" :model="user">
    <el-form-item label="用户id">
      <el-input v-model="user.id"></el-input>
    </el-form-item>
    <el-form-item label="用户名">
      <el-input v-model="user.username"></el-input>
    </el-form-item>
    <el-form-item label="用户密码">
      <el-input v-model="user.password"></el-input>
    </el-form-item>
    <el-form-item label="盐值">
      <el-input v-model="user.salt"></el-input>
    </el-form-item>
    <el-form-item label="昵称">
      <el-input v-model="user.nickname"></el-input>
    </el-form-item>
    <el-form-item label="电话">
      <el-input v-model="user.phone"></el-input>
    </el-form-item>
    <el-form-item label="头像">
      <el-input v-model="user.picture"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-input v-model="user.sex"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-input v-model="user.status"></el-input>
    </el-form-item>
    <input type="button" value="修改" @click="update()" /><p/>
  </el-form>
</template>


<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        labelPosition: 'right',
        user: {}
      }
    },
//注意：这里是methods
    methods:{

      //通过id异步获取User对象
      getUserId: function (id){
        var abc = this;
        axios.get("api/user/" + id).then(res => {
          // alert(res.data);
          abc.user = res.data;
        });
      },

      //点击修改按钮，异步修改信息
      update:function (){
        // alert(123);
        var abc = this;

        console.log(abc.user);

        axios.post("api/user/saveUser", abc.user).then(res => {
          alert(res.data)
        })
      }

        },

    //钩子函数，通过传递的id 加载getUserId（id)函数
     mounted() {
       alert(this.$route.params.id)
       this.getUserId(this.$route.params.id);
     }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

效果

前后端分离（前端）前端项目Vue（下）

前后端分离（前端）前端项目Vue（下）

前端项目Vue（下）

1.配置router下的index.js文件(相当于配置URL)

2.在components下创建组件

2.1开启跨域

2.2通过ajax的方式在组件中异步请求数据

3.使用Element组件模板美化页面

继续阅读

Vue $emit 子组件向父组件传递参数

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

ACS基本配置-权限等级管理

vue （vue2.0）使用总结(从大体结构总结)

父子组件间传值的实现父子组件间传值的实现

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条