使用vue、element搭建前端项目

VUE 官网： https://cn.vuejs.org/index.html

element-ui 官网： https://element.eleme.cn/#/zh-CN/component/installation

1、在文件里执行CMD命令

// 安装vue-cli
npm install -g vue-cli

// 初始化项目 good-demo 为项目名， （也可以这样初始化 vue init webpack-simple good-demo）
vue init webpack good-demo

// 进入 good-demo 文件夹，执行
npm install

// 启动项目
npm run dev

 

2、引入element-UI

// 执行命令
npm i element-ui -S

在main.js 里加入以下内容，即可以全局使用element

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3、引入axios

// 命令行执行
npm install axios

// main.js 引入以下内容
import axios from 'axios'
Vue.prototype.$axios = axios;

4、封装后台访问js

在src文件夹新建api 文件夹，并新建  axiosRequest.js

查看代码

import axios from 'axios';
import {Message} from 'element-ui'

// 后台地址,打包时请改成生产环境的地址
let base_url = "http://localhost:8081/";

// request 拦截器
axios.interceptors.request.use(config => {
  return config;
}, err => {
  Message.error({message: '请求超时!'});
  return Promise.resolve(err);
})
// response 拦截器
axios.interceptors.response.use(data => {
  return data;
}, error => {
  // 后端如果报错，此处就会弹框显示错误信息
  Message.error({message: error.response.data.message});
  return error;
});


// get 通用方法
const get = (url, params) => {
  return axios({
    method: 'get',
    baseURL: base_url,
    url: url,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    params: params,
    traditional: true
  }).then(res => res.data).catch(error => {
    console.log('error', error)
  });
};

// post 通用方法1, params参数拼接到url上
const postParams = (url, params) => {
  return axios({
    method: 'post',
    baseURL: base_url,
    url:  url,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    params: params,
  }).then(res => res.data);
};

// post 通用方法2, data参数是放在body里的(传json的请用data)
const postJson = (url, data) => {
  return axios({
    method: 'post',
    baseURL: base_url,
    url: url,
    headers: {
      'Content-Type': 'application/json',
    },
    data: JSON.stringify(data)
  }).then(res => res.data);
};

export {
  get,
  postParams,
  postJson
}

 新建 url.js

import { get, postParams, postJson} from './axiosRequest';

// 所有请求url 都写到这个文件里
// get 请求用 get()
// post 请求用 postJson()
// post 请求 如果后台用  @RequestParam注解接收数据的，用 postParams()

export const Url = {
  get01: () => get("/get01"),
  get02: (params) => get("/get02", params),
  post01: (params) => postParams("/post01", params),
  post02: (params) => postParams("/post02", params),
  post03: (data) => postJson("/post03", data)
};

vue文件中使用

// 在script 标签内引用
import {Url} from '../api/url'

// 写方法访问后台
    aaa: function() {
      Url.get01().then(data =>{
        console.log('get01',data)
      })
      let a = {name:"小波",b:'bbbb'}
      Url.get02(a).then(data =>{        console.log('get02',data)      })
      Url.get01().then(data =>{console.log('get02',data)})
      Url.post01().then(data => console.log('post01',data))
      Url.post02(a).then(data => console.log('post02',data))
      Url.post03(a).then(data => console.log('post03',data))
    }

 

后台接口类

查看代码

import com.google.common.collect.ImmutableMap;
import org.springframework.web.bind.annotation.*;
import java.util.Map;

@RestController
@RequestMapping
public class Demo02Controller {

    @GetMapping("get01")
    public Object getTest() {
        final ImmutableMap<String, String> of = ImmutableMap.of("aa", "ddsdf", "ldjslf", "kldsf");
        return of;
    }

    @GetMapping("get02")
    public Object get02(@RequestParam("name")String name) {
        final ImmutableMap<String, String> of = ImmutableMap.of("aa", "ddsdf", "ldjslf", "kldsf","name",name);
        return of;
    }

    @PostMapping("post01")
    public Object post01() {
        final ImmutableMap<String, String> of = ImmutableMap.of("aa", "ddsdf", "ldjslf", "kldsf");
        return of;
    }

    @PostMapping("post02")
    public Object post02(@RequestParam("name")String name) {
        final ImmutableMap<String, String> of = ImmutableMap.of("aa", "ddsdf", "ldjslf", "kldsf","name",name);
        if (true) {
            throw new RuntimeException("抛异常");
        }
        return of;
    }

    @PostMapping("post03")
    public Object post03(@RequestBody Map<String,String> map) {
        final ImmutableMap<String, String> of = ImmutableMap.of("aa", "ddsdf", "ldjslf", "kldsf");
        map.putAll(of);
        return map;
    }
}

 

5、使用路由

// 在src/views 下新建vue文件

// 在src/router/index.js 引入刚新建的vue
import HelloWorld2 from '@/components/HelloWorld2'

// 在routes属性加入对象
{
    path: '/hello',
    name: 'HelloWorld2',
    component: HelloWorld2
}