vue入门_Java

Vue从入门到深度学习
Vue入门
后端
后端代码
前端代码

1.项目结构
后端

前端

2.后端代码
MybatisPlusConfig.java

package com.example.demo.common;

import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;



@MapperScan( "com.example.demo.mapper" )
@Configuration
public class MybatisPlusConfig{
    @Bean
    public PaginationInterceptor paginationInterceptor(){
        return new PaginationInterceptor();
    }
}

Result.java

package com.example.demo.common;

public class Result {
    private String code;
    private String msg;
    private T data;

    public  Result(T data) {
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }


    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

//    public Result ok(T t){
//        this.setCode(0);
//        this.setMsg("成功");
//        this.setData(t);
//        return this;
//    }
//
//    public Result fail(String msg){
//        this.setCode(-1);
//        this.setMsg(msg);
//        return this;
//    }

//    pubLic static Result success() {
//        Result result = new Result<>();
//        result. setCode("0");
//        result . setMsg("成功");
//        return result;
//        pubLic static  Result success(T data) {
//            ResuLt result = new Result<>(data) ;
//            result. setCode("0");
//            result . setMsg("成功");
//            return result;
//        }
//    public static ResuLt error(String code, String msg) {
//        ResuLt result = new ResuLt() ;
//        result . setCode(code);
//        result . setMsg(msg);
//        return result;
//    }

        public static Result ok( ) {
            Result result = new Result<>();
            result.setCode("0");
            result.setMsg("成功");
            return result;
        }

    public static  Result ok(T data) {
            Result result = new Result<>(data) ;
            result. setCode("0");
            result . setMsg("成功");
            return result;
        }

    public Result fail(String msg){
        this.setCode("2");
        this.setMsg(msg);
        return this;
    }

    public Result(String code, String msg, T data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
        this.data=data;
    }

    public Result() {
    }

}

UserController.java

package com.example.demo.controller;

import com.example.demo.common.Result;
import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

@RestController
@RequestMapping("/user")
public class UserController {
        @Resource
        UserMapper userMapper;

        @PostMapping
        public Result save(@RequestBody User user) {
                userMapper.insert(user);
                return Result.ok();
        }
}

User.java

package com.example.demo.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;


@TableName("user")
@Data
public class User {
    @TableId(value ="id", type = IdType.AUTO)
    private Integer id;
    private String username ;
    private String nickname;
    private Integer age;
    private String sex;

}

UserMapper.java

package com.example.demo.mapper;

import com.baomidou.mybatisplus.core.mapper.baseMapper;
import com.example.demo.entity.User;

public interface UserMapper extends baseMapper{

}

application.properties

server.port=9090
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.urL=jdbc:mysql://localhost:3306/springboot-vue?seSSL=false
spring.datasource.username=root
spring.datasource.password=root

pom.xml



	4.0.0
    pom
    
        
	
    
		org.springframework.boot
		spring-boot-starter-parent
		2.5.9
		 
	
	com.example
	demo
	0.0.1-SNAPSHOT
	demo
	Demo project for Spring Boot
	
		1.8
	
	
		
			org.springframework.boot
			spring-boot-starter-web
		


		
			mysql
			mysql-connector-java
			runtime
		
		
			
			
			
		
		
		
			
			
			
		

		
			org.springframework.boot
			spring-boot-starter-test
			test
		
		
			
			
			
		

		
		
			com.baomidou
			mybatis-plus-boot-starter
			3.4.2
		
		
			org.mybatis.spring.boot
			mybatis-spring-boot-starter
			2.2.2
		
		
		
			com.baomidou
			mybatis-plus-extension
			3.4.2
		
		
			org.projectlombok
			lombok
			1.16.18

前端代码
components/global.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

3.前端代码
Aside.vue

components/Header.vue

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(process.env.base_URL),
  routes
})

export default router

store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

utils/request.js

import axios from 'axios'

const request = axios.create({
    // baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

// config.headers['token'] = user.token;  // 设置请求头
return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
    let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
    return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
    res = res ? JSON.parse(res) : res
}
return res;
},
error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
}
)


export default request

views/Home.vue

App.vue

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

import '@/assets/css/global.css'



createApp(App).use(store).use(router).use(ElementPlus ,{locale: zhCn,size:'small'}).mount('#app')

vue入门

Java相关栏目本月热门文章