计算机毕业设计 美妆神域网站 美妆商城系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥
🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。
🍊心愿:点赞 👍 收藏 ⭐评论 📝
🍅 文末获取源码联系

👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~
Java毕业设计项目~热门选题推荐《1000套》

目录

1.技术选型

2.开发工具

3.功能

3.1【角色】

3.2【前端功能模块】

3.3【后端功能模块】

4.项目演示截图

4.1 首页

4.2 美妆产品

4.3 美妆分享

4.4 下单

4.5 个人中心

4.6 购物车

4.7 后台统计

4.8 美妆产品

4.9 订单管理

5.核心代码

5.1拦截器

5.2分页工具类

5.3文件上传下载

5.4前端请求

6.LW文档大纲参考


背景意义介绍:

当前社会,随着消费者对个人形象和生活品质的重视,美妆行业迎来了快速发展的黄金时期。美妆神域网站的开发,正是为了满足这一市场需求,提供一个集产品展示、美妆分享、资讯交流和在线购物于一体的综合性平台。

本文介绍的美妆神域网站,采用了Java作为后端开发语言,结合SpringBoot框架,提升了服务端应用的开发效率和系统性能。前端则利用Vue.js技术,为用户提供了流畅、直观的交互体验。系统服务于管理员和用户两种角色,前端功能模块涵盖了登录注册、美妆产品浏览、美妆分享、美妆资讯获取、留言板交流、购物车功能以及个人中心等。

后端管理模块为管理员提供了包括用户管理、美妆分类管理、美妆产品管理、进货信息记录、留言板管理、系统管理和订单管理等在内的全面工具集。这些功能的实现,不仅提高了美妆产品管理的效率,也为用户带来了便捷的购物体验和个性化的服务。

美妆神域网站的实现,有助于美妆品牌和商家更直观地展示产品特点,更广泛地传播美妆文化,同时也为用户提供了一个学习美妆知识、分享美妆经验、购买美妆产品的平台。系统的数据分析和报表统计功能,还可以帮助商家洞察市场趋势,优化库存管理,提升销售策略。总之,该网站对于推动美妆行业的信息化发展、促进消费者与品牌之间的互动具有重要的现实意义。

1.技术选型

springboot、mybatisplus、vue、elementui、html、css、js、mysql、jdk1.8

2.开发工具

idea、navicat

3.功能

3.1【角色】

管理员、用户

3.2【前端功能模块】

  • 登录
  • 注册
  • 美妆产品
  • 美妆分享
  • 美妆资讯
  • 留言板
  • 购物车
  • 在线客服
  • 个人中心

3.3【后端功能模块】

  • 登录
  • 首页(报表统计)
  • 用户
  • 美妆分类
  • 美妆产品
  • 美妆分享
  • 进货信息
  • 留言板管理
  • 系统管理
  • 订单管理
  • 用户资料

4.项目演示截图

4.1 首页

4.2 美妆产品

4.3 美妆分享

4.4 下单

4.5 个人中心

4.6 购物车

4.7 后台统计

4.8 美妆产品

4.9 订单管理

5.核心代码

5.1拦截器

package com.interceptor;
 
import com.alibaba.fastjson.JSONObject;
import com.annotation.IgnoreAuth;
import com.entity.TokenEntity;
import com.service.TokenService;
import com.utils.R;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Component;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.method.HandlerMethod;
import org.springframework.web.servlet.HandlerInterceptor;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
 
/**
 * 权限(Token)验证
 */
@Component
public class AuthorizationInterceptor implements HandlerInterceptor {
 
    public static final String LOGIN_TOKEN_KEY = "Token";
 
    @Autowired
    private TokenService tokenService;
    
	@Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
 
		//支持跨域请求
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,request-source,Token, Origin,imgType, Content-Type, cache-control,postman-token,Cookie, Accept,authorization");
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
	// 跨域时会首先发送一个OPTIONS请求,这里我们给OPTIONS请求直接返回正常状态
	if (request.getMethod().equals(RequestMethod.OPTIONS.name())) {
        	response.setStatus(HttpStatus.OK.value());
            return false;
        }
        
        IgnoreAuth annotation;
        if (handler instanceof HandlerMethod) {
            annotation = ((HandlerMethod) handler).getMethodAnnotation(IgnoreAuth.class);
        } else {
            return true;
        }
 
        //从header中获取token
        String token = request.getHeader(LOGIN_TOKEN_KEY);
        
        /**
         * 不需要验证权限的方法直接放过
         */
        if(annotation!=null) {
        	return true;
        }
        
        TokenEntity tokenEntity = null;
        if(StringUtils.isNotBlank(token)) {
        	tokenEntity = tokenService.getTokenEntity(token);
        }
        
        if(tokenEntity != null) {
        	request.getSession().setAttribute("userId", tokenEntity.getUserid());
        	request.getSession().setAttribute("role", tokenEntity.getRole());
        	request.getSession().setAttribute("tableName", tokenEntity.getTablename());
        	request.getSession().setAttribute("username", tokenEntity.getUsername());
        	return true;
        }
        
		PrintWriter writer = null;
		response.setCharacterEncoding("UTF-8");
		response.setContentType("application/json; charset=utf-8");
		try {
		    writer = response.getWriter();
		    writer.print(JSONObject.toJSONString(R.error(401, "请先登录")));
		} finally {
		    if(writer != null){
		        writer.close();
		    }
		}
		return false;
    }
}

5.2分页工具类

 
package com.utils;
 
import java.io.Serializable;
import java.util.List;
import java.util.Map;
 
import com.baomidou.mybatisplus.plugins.Page;
 
/**
 * 分页工具类
 */
public class PageUtils implements Serializable {
	private static final long serialVersionUID = 1L;
	//总记录数
	private long total;
	//每页记录数
	private int pageSize;
	//总页数
	private long totalPage;
	//当前页数
	private int currPage;
	//列表数据
	private List<?> list;
	
	/**
	 * 分页
	 * @param list        列表数据
	 * @param totalCount  总记录数
	 * @param pageSize    每页记录数
	 * @param currPage    当前页数
	 */
	public PageUtils(List<?> list, int totalCount, int pageSize, int currPage) {
		this.list = list;
		this.total = totalCount;
		this.pageSize = pageSize;
		this.currPage = currPage;
		this.totalPage = (int)Math.ceil((double)totalCount/pageSize);
	}
 
	/**
	 * 分页
	 */
	public PageUtils(Page<?> page) {
		this.list = page.getRecords();
		this.total = page.getTotal();
		this.pageSize = page.getSize();
		this.currPage = page.getCurrent();
		this.totalPage = page.getPages();
	}
	
	/*
	 * 空数据的分页
	 */
	public PageUtils(Map<String, Object> params) {
 		Page page =new Query(params).getPage();
		new PageUtils(page);
	}
 
	 
	public int getPageSize() {
		return pageSize;
	}
 
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
 
	public int getCurrPage() {
		return currPage;
	}
 
	public void setCurrPage(int currPage) {
		this.currPage = currPage;
	}
 
	public List<?> getList() {
		return list;
	}
 
	public void setList(List<?> list) {
		this.list = list;
	}
 
	public long getTotalPage() {
		return totalPage;
	}
 
	public void setTotalPage(long totalPage) {
		this.totalPage = totalPage;
	}
 
	public long getTotal() {
		return total;
	}
 
	public void setTotal(long total) {
		this.total = total;
	}
	
}

5.3文件上传下载

package com.controller;
 
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import java.util.UUID;
 
import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
 
import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.entity.EIException;
import com.service.ConfigService;
import com.utils.R;
 
/**
 * 上传文件映射表
 */
@RestController
@RequestMapping("file")
@SuppressWarnings({"unchecked","rawtypes"})
public class FileController{
	@Autowired
    private ConfigService configService;
	/**
	 * 上传文件
	 */
	@RequestMapping("/upload")
    @IgnoreAuth
	public R upload(@RequestParam("file") MultipartFile file,String type) throws Exception {
		if (file.isEmpty()) {
			throw new EIException("上传文件不能为空");
		}
		String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);
		File path = new File(ResourceUtils.getURL("classpath:static").getPath());
		if(!path.exists()) {
		    path = new File("");
		}
		File upload = new File(path.getAbsolutePath(),"/upload/");
		if(!upload.exists()) {
		    upload.mkdirs();
		}
		String fileName = new Date().getTime()+"."+fileExt;
		File dest = new File(upload.getAbsolutePath()+"/"+fileName);
		file.transferTo(dest);
		if(StringUtils.isNotBlank(type) && type.equals("1")) {
			ConfigEntity configEntity = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
			if(configEntity==null) {
				configEntity = new ConfigEntity();
				configEntity.setName("faceFile");
				configEntity.setValue(fileName);
			} else {
				configEntity.setValue(fileName);
			}
			configService.insertOrUpdate(configEntity);
		}
		return R.ok().put("file", fileName);
	}
	
	/**
	 * 下载文件
	 */
	@IgnoreAuth
	@RequestMapping("/download")
	public ResponseEntity<byte[]> download(@RequestParam String fileName) {
		try {
			File path = new File(ResourceUtils.getURL("classpath:static").getPath());
			if(!path.exists()) {
			    path = new File("");
			}
			File upload = new File(path.getAbsolutePath(),"/upload/");
			if(!upload.exists()) {
			    upload.mkdirs();
			}
			File file = new File(upload.getAbsolutePath()+"/"+fileName);
			if(file.exists()){
 
				HttpHeaders headers = new HttpHeaders();
			    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);    
			    headers.setContentDispositionFormData("attachment", fileName);    
			    return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),headers, HttpStatus.CREATED);
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
		return new ResponseEntity<byte[]>(HttpStatus.INTERNAL_SERVER_ERROR);
	}
	
}

5.4前端请求

import axios from 'axios'
import router from '@/router/router-static'
import storage from '@/utils/storage'
 
const http = axios.create({
    timeout: 1000 * 86400,
    withCredentials: true,
    baseURL: '/furniture',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    }
})
// 请求拦截
http.interceptors.request.use(config => {
    config.headers['Token'] = storage.get('Token') // 请求头带上token
    return config
}, error => {
    return Promise.reject(error)
})
// 响应拦截
http.interceptors.response.use(response => {
    if (response.data && response.data.code === 401) { // 401, token失效
        router.push({ name: 'login' })
    }
    return response
}, error => {
    return Promise.reject(error)
})
export default http

6.LW文档大纲参考

 具体LW如何写法,可以咨询博主,耐心分享!

你可能还有感兴趣的项目👇🏻👇🏻👇🏻

更多项目推荐:计算机毕业设计项目

如果大家有任何疑虑,请在下方咨询或评论

  • 27
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: Springboot Vue 前后端分离的登录注册代码可以通过使用RESTful API来实现,它可以帮助前端和后端之间的数据传输。后端可以使用Spring Boot框架来构建RESTful API,而前端则可以使用Vue.js来调用后端API实现登录或注册。 ### 回答2: Spring BootVue.js是非常流行的前后端分离框架,可以很方便地进行登录注册功能的开发。 在后端Spring Boot中,首先需要创建一个UserController类来处理用户相关的请求,包括注册和登录。在UserController中,我们可以定义两个POST请求的接口,一个用于用户注册,一个用于用户登录。 用户注册接口可以接收一个User对象作为参数,User对象包含了用户的用户名和密码等信息。在用户注册接口中,我们可以先检查数据库中是否存在相同用户名的用户,如果不存在,则可以将用户信息保存到数据库中,并返回相应的注册成功提示。 用户登录接口可以接收一个LoginRequest对象作为参数,LoginRequest对象包含了用户输入的用户名和密码。在用户登录接口中,我们可以通过用户名在数据库中查询对应的用户信息,然后比对密码是否正确,如果正确则返回登录成功的提示,否则返回登录失败的提示。 在前端Vue.js中,我们可以使用axios库来发送HTTP请求,调用后端提供的接口。在注册页面,可以通过表单获取用户输入的用户名和密码,并发送POST请求到后端的注册接口。在登录页面,也是通过表单获取用户输入的用户名和密码,并发送POST请求到后端的登录接口。 后端返回的响应可以根据具体需求进行处理,比如注册成功后可以跳转到登录页面,登录成功后可以跳转到主页。 总结起来,通过Spring Boot提供的后端接口和Vue.js提供的前端页面,前后端分离的登录注册功能可以很方便地实现。以上是一个简单的示例,实际的实现会根据具体需求和业务逻辑而有所不同。 ### 回答3: springboot是一个应用程序框架,而vue是一个用于构建用户界面的前端框架。在前后端分离的架构中,前后端分别使用不同的技术进行开发,并通过接口进行通信。下面是一个简单示例的登录注册代码: 后端(使用springboot): 1. 创建一个UserController类,用于处理与用户相关的请求。 2. 在该类中,创建登录和注册的接口,分别对应/login和/register路径。 3. 在登录接口中,获取前端传来的用户名和密码,并与数据库中的用户信息进行比较。若比对成功,则返回成功信息;否则返回失败信息。 4. 在注册接口中,获取前端传来的用户名和密码,并将用户信息存入数据库。 5. 使用spring security等权限管理框架,对接口进行安全验证,确保只有经过认证的用户才能访问。 前端(使用vue): 1. 创建一个Login.vue和Register.vue组件,分别用于登录和注册界面的展示。 2. 在组件中,创建表单,用于用户输入用户名和密码。 3. 在提交按钮点击事件中,使用axios等库,将用户输入的信息发送给后端的登录或注册接口。 4. 根据接口返回的结果,在前端展示登录或注册成功或失败的信息。 总结: 以上代码只是一个简单示例,实际开发中可能涉及更多功能的实现。通过springbootvue前后端分离架构,可以实现页面与后端数据的分离,提升开发效率和灵活性。为了保证系统安全性,还需要加入权限管理等措施。这里只提供了一个基本的框架,具体的实现和功能可以根据需求进行扩展和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

计算机编程-吉哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值