前后端分离（前端）

前端项目Vue（下）

启动vue项目：npm run dev

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

实现效果

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)

套用组件模板美化页面

效果

点击查看进入详情修改页

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

UpdateUser.vue

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

效果