入门vue+springboot项目

介绍

为了应付毕业设计，花了一个多月学习了vue+springboot做一个项目。现在把项目的一些架构和重点整理一下。

1.vue前端

vue主要还是配置问题，我在项目中用到的ajax和element ui是需要自己安装的。然后就是配置问题，主要是应对跨域还有请求头中添加token。

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'import Axios from 'axios'
import axios from 'axios'Vue.prototype.$axios=Axios
Axios.defaults.baseURL="/api"
Vue.use(ElementUI)
Vue.config.productionTip = falseaxios.interceptors.request.use(config => {let token = localStorage.getItem("token");//token保存在本地if(token){config.headers.token = token; }return config
},error => {return Promise.reject(error)
})

proxyTable: {'/api':{target: "http://localhost:8081/",//我这里后端的端口是8081changeOrigin:true,pathRewrite:{'^/api':''}}},

按照这样配置之后，可以这样访问接口：

this.$axios.get('test',{params:{id:'123'}}).then(res=>{console.log(res)}})

此外就是看element ui的文档去调配数据。

2.springboot后端

先上后端的目录

comment层
我这里的comment层是主要是跟token相关的，包括生成验证token码，拦截请求配置等，都是一处处借鉴简化来的，比较简单，目的能用就行。

package com.cpu.design.comment;import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.exceptions.JWTCreationException;
import com.auth0.jwt.exceptions.JWTVerificationException;
import com.auth0.jwt.interfaces.DecodedJWT;import java.util.Date;//该类就是生成和验证token
public class TokenUitls {private static final long EXPIRE_TIME= 10*60*60;//token到期时间1小时private static final String TOKEN_SECRET="ljdyacaads*13nj??";  //密钥盐public static String generateToken(String username){String token=null;try {Date expireAt=new Date(System.currentTimeMillis()+EXPIRE_TIME);token = JWT.create().withIssuer("auth0")//发行人.withClaim("username",username)//存放数据.withExpiresAt(expireAt)//过期时间.sign(Algorithm.HMAC256(TOKEN_SECRET));} catch (IllegalArgumentException|JWTCreationException je) {}return token;}public static Boolean verifyToken(String token){try {JWTVerifier jwtVerifier=JWT.require(Algorithm.HMAC256(TOKEN_SECRET)).withIssuer("auth0").build();//创建token验证器DecodedJWT decodedJWT=jwtVerifier.verify(token);System.out.println("认证通过：");System.out.println("username: " + decodedJWT.getClaim("username").asString());System.out.println("过期时间：      " + decodedJWT.getExpiresAt());} catch (IllegalArgumentException |JWTVerificationException e) {//抛出错误即为验证不通过return false;}return true;}
}

package com.cpu.design.comment;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;//该类作用为配置拦截器，主要是哪些路径会被拦截，哪些不会
@Configuration
public class MvcInterceptorConfig extends WebMvcConfigurationSupport {@Autowiredprivate TokenInterceptor tokenInterceptor;@Overrideprotected void addInterceptors(InterceptorRegistry registry){registry.addInterceptor(tokenInterceptor).addPathPatterns("/**")//拦截所有路径.excludePathPatterns("/login");//不被拦截的路径，登录的时候还没有token码，不拦截super.addInterceptors(registry);}
}

package com.cpu.design.comment;import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;//逻辑上的一些拦截，搬运修改的。
@Component
public class TokenInterceptor implements HandlerInterceptor {@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object handler) throws Exception {System.out.println("开始拦截");if (request.getMethod().equals("OPTIONS")) {System.out.println("options请求");response.setStatus(HttpServletResponse.SC_OK);return true;}response.setCharacterEncoding("utf-8");String token = request.getHeader("token");if (token != null) {boolean result = JwtUitls.verify(token);if (result) {System.out.println("通过拦截器");return true;}}System.out.println("未通过！");return false;}
}

entity层
这一层放的都是实体类

package com.cpu.design.entity;
import javax.persistence.*;
@Entity
@Table(name = "userinfo")
public class User {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)//数据库里的主键是自动递增的//变量名最好一一对应，不然还要用注解标定private Long id;private String username;private String password;private int level;public User() {}public User(Long id, String username, String password, int level) {this.id = id;this.username = username;this.password = password;this.level = level;}@Overridepublic String toString() {return "User{" +"id=" + id +", username='" + username + '\'' +", password='" + password + '\'' +", level=" + level +'}';}public Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public int getLevel() {return level;}public void setLevel(int level) {this.level = level;}
}

dao层
dao层跟数据库相关，可以写原生sql语句，也有封装好的接口。

package com.cpu.design.dao;import com.cpu.design.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;public interface UserRepository extends JpaRepository<User, Long> {//如果是修改的话还要加上Transactional和Modifying这两个注解@Query(value = "select * from userinfo where username = ?1",nativeQuery = true)User findByName(String name);
}

service层

package com.cpu.design.service;
import com.cpu.design.dao.UserRepository;
import com.cpu.design.entity.User;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;@Service
public class UserService {@Resourceprivate UserRepository userRepository;public User findByName(String uname){return userRepository.findByName(uname);}public void saveuser(User user){userRepository.save(user);//这个就是封装好的接口，直接插入或者更新}}

controller层
这层跟前端直接交互

package com.cpu.design.controller;import com.alibaba.fastjson.JSONObject;
import com.cpu.design.comment.JwtUitls;
import com.cpu.design.entity.User;
import com.cpu.design.service.UserService;
import com.fasterxml.jackson.core.JsonProcessingException;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.HashMap;
@RestController
public class UserController {@Resourceprivate UserService userService;@ResponseBody@PostMapping("/login")public HashMap<String,Object> login(@RequestBody JSONObject jsonObject) throws JsonProcessingException {//可以在此处检验用户密码System.out.println("拦截器无了");HashMap<String,Object> hs = new HashMap<>();String username = jsonObject.get("username").toString();String password = jsonObject.get("password").toString();User user = userService.findByName(username);if(user == null){hs.put("code","400");hs.put("msg","不存在该账户！");return hs;}String real = user.getPassword();if(password.equals(real)){Integer level = user.getLevel();String token = JwtUitls.sign(username);hs.put("token",token);hs.put("code",200);hs.put("identity",level);}else{hs.put("code",300);hs.put("msg","密码错误！");}return hs;}@ResponseBody@PostMapping("/saveuser")public HashMap<String,Object> saveuser(@RequestBody User user){HashMap<String,Object> hs = new HashMap<>();try {System.out.println(user.toString());userService.saveuser(user);hs.put("code","200");}catch (Exception e){hs.put("code","500");hs.put("msg",e);}return hs;}
}

配置

server:port: 8081spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverusername: rootpassword: ****url: jdbc:mysql://localhost:3306/design

依赖

<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId><version>3.9.0</version></dependency><dependency><groupId>org.json</groupId><artifactId>json</artifactId><version>20190722</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.28</version></dependency></dependencies>

结语

新手第一次搞前后端交互的项目真是困难重重，没啥前辈只能自己摸索，发个文章插个眼，以后再搞这样的项目不用到处找。上面说的可能问题不少，欢迎大佬指正！

入门vue+springboot项目相关推荐

教你如何制作vue+springboot项目
前言最近刚刚做了一个基于vue+springboot的学生成绩管理系统,于是基于这点,对遇到的一些问题进行一些配置的汇总.以及vue+springboot项目是怎么实现的,以下将贴出vue和spri ...
在腾讯云服务器跑Vue + SpringBoot项目
背景:闲来无事,跟着做了个Vue+SpringBoot项目,做了一些之后项目内容没什么思路搞什么了,然后就想着再搭个服务器. 一:项目及云服务器还有域名准备项目:这个-自己准备吧,只要自己做好的能在 ...
Vue+Springboot项目练手（主要是后端）
如果观看的朋友不太了解Vue的话我建议你可以学习一下Vue框架,如果你没有太多时间的话,可以参考我如下文章,不懂的可以给发信息,应该能解决问题. Vue学习笔记:我个人不太建议看这篇文章,可以自己去找 ...
基于vue技术栈制作自己的简历网站问题总结篇(入门vue基础项目)
前言目前在学习vue技术栈的同时接触到了很多以前没用过的各种工具(如webpack,npm,git等等),配合着vue全家桶里的一些东西做了一个基于vue的个人简历网站(虽然用vue框架搭简历网站优 ...
在阿里云从0开始部署vue+springboot项目
我很生气服务器被黑了,top ps命令被修改,top下面的进程基本都是0占用率,控制台看到的cpu是100,找不到原因,一开始我还以为是显示错了,后来仔细看,top查看到ni(nice cpu ti ...
vue +springboot项目部署（nginx）
后端: 1.使用package 打成jar包 2.将jar包放到搭建好的liunx服务器下(根据自己来规定所放位置) cd /opt/ciss/www/project/ 3.可以自己编辑执行脚本sta ...
Git拉代码到本地并运行Vue/springboot项目代码（以内网gitlab为例）
因本人是开发小白,所以将开发过程中所需要的关键地方都记载在此处以备复盘,同时也希望给大家可以提供一些帮助. 目录一.安装Git 二.登录GitLab账号三.拉取代码 1.直接通过http拉取代码 ...
【入门】Spring-Boot项目配置Mysql数据库
前言前面参照SpringBoot官网,自动生成了简单项目点击打开链接配置数据库和代码遇到的问题问题1:cannot load driver class :com.mysql.jdbc.Drive ...
【项目实战】vue+springboot项目使用富文本编辑器实现长文章发表和展示
本人前端烂,文章展示部分现在还弄的不好. 效果: 很想实现点击查看详情然后进入查看具体的文章内容,但还不知道怎么弄,有知道的兄弟可以教我一下. 首先npm下载: cnpm install vue-qu ...

入门vue+springboot项目

介绍

1.vue前端

2.springboot后端

结语

入门vue+springboot项目相关推荐

最新文章

热门文章