网站广东海外建设集团有限公司,上海网站开发薪资,动易网站官网,wordpress rss采集插件一、环境准备
此次实验需要的环境#xff1a; jdk、maven、nvm和node.js
开发工具#xff1a;idea或者Spring Tool Suite 4#xff0c;前端可使用HBuilder X#xff0c;数据库Mysql
下面提供maven安装与配置步骤和nvm安装与配置步骤#xff1a;
1、maven安装与配置
1…一、环境准备
此次实验需要的环境 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.zip 1.2 解压到安装目录 1.3 将maven目录配置成环境变量 1.4 Cmd打开命令窗口,验证maven: mvn -v 1.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/releases
windows系统下载nvm-setup.exe 2.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.js
4. nvm use 16.20.0 切换到使用指定的nodejs版本
*** 表示当前使用的node版本是16.20.0 3.3 NVM常用命令
nvm off // 禁用node.js版本管理(不卸载任何东西)
nvm on // 启用node.js版本管理
nvm install // 安装node.js的命名version是版本号 例如nvm install 8.12.0
nvm 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 4
1.3 项目结构以及代码
项目的总体结构如图 pom.xml文件
?xml version1.0 encodingUTF-8?project xmlnshttp://maven.apache.org/POM/4.0.0
xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0
https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.7.8/versionrelativePath/ !-- lookup parent from repository --/parentgroupIdcom.example/groupIdartifactIdspringbootvue/artifactIdversion0.0.1-SNAPSHOT/versionnamespringbootvue/namedescriptionDemo project for Spring Boot/descriptionpropertiesjava.version1.8/java.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion2.2.1/version/dependencydependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion8.0.28/version/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdoptionaltrue/optional/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-core/artifactIdversion3.5.3/version/dependency/dependenciesbuildresourcesresourcedirectorysrc/main/java/directoryincludesinclude**/*.xml/include/includes/resource/resourcespluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactIdconfigurationexcludesexcludegroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/exclude/excludes/configuration/plugin
/plugins/build/projectapplication.yml
spring:datasource:username: rootpassword: 1qazWSX3edcurl: jdbc:mysql://localhost:3306/course2023?allowMultiQueriestruecharacterEncodingUTF-8characterSetResultsUTF
8zeroDateTimeBehaviorconvertToNulluseSSLfalsedriver-class-name: com.mysql.cj.jdbc.Driverserver:port: 8181mybatis:type-aliases-package: com.example.springbootvue.entitymapper-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;RestControllerRequestMapping(/user)public class UserController {AutowiredUserService userService;GetMapping(/findAll)public Listuser 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;DataNoArgsConstructorAllArgsConstructorpublic 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;MapperRepositorypublic interface UserMapper {public Listuser 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 Listuser 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;Servicepublic class UserServiceImpl implements UserService{AutowiredUserMapper userMapper;Overridepublic Listuser queryuserList() {return userMapper.queryuserList();}Overridepublic user queryUserByNameAndPwd(String username, String password) {return userMapper.queryUserByNameAndPwd(username,password);}}usermapper.xml ?xml version1.0 encodingUTF8?!DOCTYPE mapperPUBLIC -//mybatis.org//DTD Config 3.0//ENhttp://mybatis.org/dtd/mybatis-3-mapper.dtdmapper namespacecom.example.springbootvue.mapper.UserMapperselect idqueryuserList
resultTypecom.example.springbootvue.entity.userselect * from user/selectselect idqueryUserByNameAndPwd
resultTypecom.example.springbootvue.entity.user
select * from user where username#{username} and password #{password}/select
/mapperCrosConfig.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;Configurationpublic class CrosConfig implements WebMvcConfigurer {Overridepublic 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 myfirst
npm run serve
在浏览器输入生成的链接得到下图此时vue项目搭建完成 2.2 构建一个简单的登录界面
修改router文件夹下面的index.js如下
import Vue from vueimport VueRouter from vue-routerimport HomeView from ../views/HomeView.vueimport 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如下 templatediv classhome{{ username }} 登录成功/div/templatescriptexport default {data() {return {}},created() {this.username this.$route.query.username},}/scriptstyle/style在views文件夹下创建login.vue templatediv classlogindiv classmylogin aligncenterh4登录/h4el-form:modelloginForm:rulesloginRulesrefloginFormlabel-width0pxel-form-item label propaccount stylemargin-top: 10pxel-rowel-col :span2span classel-icon-s-custom/span/el-colel-col :span22el-inputclassinpsplaceholder账号v-modelloginForm.account/el-input/el-col/el-row/el-form-itemel-form-item label proppassWordel-rowel-col :span2span classel-icon-lock/span/el-colel-col :span22el-inputclassinpstypepasswordplaceholder密码v-modelloginForm.passWord/el-input/el-col/el-row/el-form-itemel-form-item stylemargin-top: 55pxel-button typeprimary round classsubmitBtn clicksubmitForm登录/el-button/el-form-itemdiv classunloginrouter-link :to{ path: /forgetpwd } 忘记密码? /router-link|router-link :to{ path: /register }a hrefregister.vue target_blank alignright注册新账号/a/router-link/div/el-form/div/div/templatescriptimport { mapMutations } from vuex;import axios from axiosexport default {name: Login,data: function () {return {loginForm: {account: ,passWord: ,},loginRules: {account: [{ required: true, message: 请输入账号, trigger: blur }],passWord: [{ required: true, message: 请输入密码, trigger: blur }],},};},methods: {...mapMutations([changeLogin]),submitForm() {const userAccount this.loginForm.account;const userPassword this.loginForm.passWord;const params new URLSearchParams();params.append(username, userAccount);params.append(password, userPassword);// 发起一个post请求axios({method: post,url: http://localhost:8181/user/login,params: params}).then(resp{console.log(resp.data);if(resp.data ! null resp.data.id ! null){this.$router.push(/home?usernameresp.data.username);}else{this.$message({message: 账户不存在或密码错误,type: warning});}});console.log(用户输入的账号为, userAccount);console.log(用户输入的密码为, userPassword);},},};/scriptstyle.login {height: 100vh;background-image: linear-gradient(to bottom right, #3F5EFB, #42b983);overflow: hidden;width: 100vw;padding: 0;margin: 0;font-size: 16px;background-position: left top;background-color: #242645;color: #fff;position: relative;}.mylogin {width: 240px;height: 280px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;padding: 50px 40px 40px 40px;box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);opacity: 1;
background: linear-gradient(230deg,rgba(53, 57, 74, 0) 0%,rgb(0, 0, 0) 100%);}.inps input {border: none;color: #fff;background-color: transparent;font-size: 12px;}.submitBtn {background-color: transparent;color: #39f;width: 200px;}/stylelogin.vue要用到axios和element-ui所以我们要安装axios和element-ui
npm install axios
npm 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 axiosApp.vue修改如下
templatediv idapprouter-view//div/template在终端输入指令npm run serve运行vue项目点击生成的链接即可然后输入账号和密码进行登录登录后进入主页面 四、完成用户注册和查询功能
用户注册功能效果图如下 点击注册新账号跳转到注册页面 填写新账户密码点击注册注册成功之后跳转到登录页面用新账户登录可以登录成功 查询功能效果在登陆成功页面添加查询按钮 点击查询按钮查询所有账户效果如图所示
