一、环境准备------此次实验需要的环境 jdk、maven、nvm和node.js开发工具idea或者Spring Tool Suite 4前端可使用HBuilder X数据库Mysql下面提供maven安装与配置步骤和nvm安装与配置步骤### 1、maven安装与配置1.1 下载maven包https://dlcdn.apache.org/maven/maven-3/3.9.5/binaries/apache-maven-3.9.5-bin.zip1.2 解压到安装目录1.3 将maven目录配置成环境变量1.4 Cmd打开命令窗口,验证maven: mvn -v1.5 配置setting文件 打开maven目录找到conf目录下setting.xml 修改默认仓库路径二、nvm安装与配置----------### 1、NVM简介在项目开发过程中使用到vue框架技术需要安装node下载项目依赖但经常会遇到node版本不匹配 而导致无法正常下载重新安装node却又很麻烦。为解决以上问题nvm一款node的版本管理工 具能够管理node的安装和使用使用简单可下载指定node版本和切换使用不同版本方便了node 的使用。### 2、NVM安装2.1 下载安装包下载地址 https://github.com/coreybutler/nvm-windows/releaseswindows系统下载nvm-setup.exe2.2 安装双击nvm-setup.exe开始安装安装之前最好卸载计算机已经安装的node选择nvm安装根路径指定nodejs的安装路径最好提前新建nodejs文件夹在安装时选择)2.3 测试打开命令行输入nvm -v 可查看版本,即安装成功### 3、NVM使用3.1 设置设置下载源修改setting.txt 在安装根路径下编辑setting.txt添加以下两行镜像地址node_mirror:https://npm.taobao.org/mirrors/node/npm_mirror: https://npm.taobao.org/mirrors/npm/3.2 使用1. nvm list available 显示可以安装的所有node.js的版本2. nvm install 16.20.0 安装node.js的命名 version是版本3. nvm list 查看已安装的node.js4. nvm use 16.20.0 切换到使用指定的nodejs版本*** 表示当前使用的node版本是16.20.03.3 NVM常用命令nvm off // 禁用node.js版本管理(不卸载任何东西)nvm on // 启用node.js版本管理nvm install // 安装node.js的命名version是版本号 例如nvm install 8.12.0nvm uninstall // 卸载node.js是的命令卸载指定版本的nodejs当安装失败时卸载使用nvm ls // 显示所有安装的node.js版本nvm list available // 显示可以安装的所有node.js的版本nvm use // 切换到使用指定的nodejs版本nvm v // 显示nvm版本nvm install stable // 安装最新稳定版3.4 NVM常见异常1.nvm use失效 无法使用node原因在安装nvm的时候修改了nodejs的安装路径但安装包并未在指定路径新建nodejs 解决在指定路径手动新建nodejs文件夹重新安装并指定路径三、搭建前后端分离项目-----------### 1、后端项目1.1 数据库设计1.2 新建springboot工程第一种方式使用idea创建File — New Project — Spring Initializr ,选择对应的配置。如果idea没有Spring Initializr ,或者本地jdk不支持Spring Initializr中jdk的选项可以采用第二种方式访问https://start.aliyun.com/选择对应的配置获取代码然后导入idea或Spring Tool Suite 41.3 项目结构以及代码项目的总体结构如图pom.xml文件 ?xml version1.0 encodingUTF-8? 4.0.0 org.springframework.boot spring-boot-starter-parent 2.7.8 com.example springbootvue 0.0.1-SNAPSHOT springbootvue Demo project for Spring Boot java.version1.8/java.version org.springframework.boot spring-boot-starter-web org.mybatis.spring.boot mybatis-spring-boot-starter 2.2.1 mysql mysql-connector-java 8.0.28 org.projectlombok lombok true org.springframework.boot spring-boot-starter-test test com.baomidou mybatis-plus-core 3.5.3 src/main/java/.xmlorg.springframework.boot spring-boot-maven-plugin org.projectlombok lombok application.yml spring: datasource: username: root password: 1qazWSX3edc url: jdbc:mysql://localhost:3306/course2023? allowMultiQueriestruecharacterEncodingUTF-8characterSetResultsUTF 8zeroDateTimeBehaviorconvertToNulluseSSLfalse driver-class-name: com.mysql.cj.jdbc.Driver server: port: 8181 mybatis: type-aliases-package: com.example.springbootvue.entity mapper-locations: classpath:mapper/.xmlUserController.java package com.example.springbootvue.controller; import com.example.springbootvue.entity.user; import com.example.springbootvue.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import java.util.List; RestController RequestMapping(“/user”) public class UserController { Autowired UserService userService; GetMapping(“/findAll”) public List findAll() { return userService.queryuserList(); } GetMapping(“/”) public String test() { return “test”; } PostMapping(“/login”) public user login(RequestParam(“username”) String username, RequestParam(“password”) String password) { return userService.queryUserByNameAndPwd(username, password); } }user.java package com.example.springbootvue.entity; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; Data NoArgsConstructor AllArgsConstructor public class user { private Integer id; private String username; private String password; }UserMapper.java package com.example.springbootvue.mapper; import com.example.springbootvue.entity.user; import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Param; import org.springframework.stereotype.Repository; import java.util.List; Mapper Repository public interface UserMapper { public List queryuserList(); public user queryUserByNameAndPwd(Param(“username”)String username, Param(“password”)String password); }UserService.java package com.example.springbootvue.service; import com.example.springbootvue.entity.user; import java.util.List; public interface UserService { public List queryuserList(); public user queryUserByNameAndPwd(String username,String password); }UserServiceImpl.java package com.example.springbootvue.service; import com.example.springbootvue.entity.user; import com.example.springbootvue.mapper.UserMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; Service public class UserServiceImpl implements UserService{ Autowired UserMapper userMapper; Override public List queryuserList() { return userMapper.queryuserList(); } Override public user queryUserByNameAndPwd(String username, String password) { return userMapper.queryUserByNameAndPwd(username,password); } }usermapper.xml ?xml version1.0 encodingUTF8? select * from user select * from user where username#{username} and password #{password} CrosConfig.java package com.example.springbootvue.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; Configuration public class CrosConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry){ registry.addMapping(/“) .allowedOriginPatterns(”“) .allowedMethods(“GET”,“HEAD”,“POST”,“PUT”,“DELETE”,“OPTIONS”) .allowCredentials(true) .maxAge(3600) .allowedHeaders(”); } }运行SpringbootvueApplication.java启动成功后在浏览器上面访问localhost:8181/user/### 2、前端项目2.1 创建vue项目首先创建一个文件夹在地址栏输入cmd,按回车键会出现下面的命令行窗口输入npm -v和node -v 查看是否安装接着输入npm install -g vue/cli来安装相关插件如果出现如下图错误是因为npm的官方源在国 外下载很慢下面我们将npm源切换成国内源。下载淘宝镜像源npm install -g cnpm --registryhttps://registry.npm.taobao.org把当前的源切换成淘宝的源npm config set registry https://registry.npm.taobao.org查看源是否切换成功npm config get registry继续安装npm install -g vue/cli安装好之后输入vue create myfirst(myfirst是你要创建的项目的名称回车。然后进入下图界面选 择第三个回车。接着选择下图所示选项上下箭头移动空格键选中接着回车然后后面按我下图所选的即可接着会加载一段时间稍微等待一下然后我们可以按它的提示输入cd myfirstnpm run serve在浏览器输入生成的链接得到下图此时vue项目搭建完成2.2 构建一个简单的登录界面修改router文件夹下面的index.js如下 import Vue from ‘vue’ import VueRouter from ‘vue-router’ import HomeView from ‘…/views/HomeView.vue’ import login from “/views/login”; Vue.use(VueRouter) const routes [ { path: ‘/’, name: ‘login’, component: login }, { path: ‘/home’, name: ‘home’, component: HomeView }, { path: ‘/about’, name: ‘about’, component: () import(/* webpackChunkName: “about” */ ‘…/views/AboutView.vue’) } ] const router new VueRouter({ mode: ‘history’, base: process.env.BASE_URL, routes }) export default router修改views文件夹下面的HomeView.vue如下{{ username }} 登录成功login.vue要用到axios和element-ui所以我们要安装axios和element-uinpm install axiosnpm install element-ui -S在main.js中引入element-ui import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’; Vue.use(ElementUI);axios可以在对应的页面引入 import axios from axios’App.vue修改如下 在终端输入指令npm run serve运行vue项目点击生成的链接即可然后输入账号和密码进行登录登录后进入主页面四、完成用户注册和查询功能-------------用户注册功能效果图如下点击注册新账号跳转到注册页面填写新账户密码点击注册注册成功之后跳转到登录页面用新账户登录可以登录成功 查询功能效果在登陆成功页面添加查询按钮点击查询按钮查询所有账户效果如图所示