
- 原 因
- 全球金融危机
- 类 型
- 就业问题
- 中文名
- 项目实战
- 目 的
- 就业保障体系完善
-
Vue + Spring Boot 项目实战(一):项目简介
2019-03-31 11:19:37白卷是一款使用 Vue+Spring Boot 开发的前后端分离项目,主要帮助 web 开发初学者通过实践方式打通各个环节的知识。
GitHub 地址:https://github.com/Antabot/White-Jotter
教程目录
第一部分
Vue + Spring Boot 项目实战(一):项目简介
Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目
Vue + Spring Boot 项目实战(三):前后端结合测试(登录页面开发)
Vue + Spring Boot 项目实战(四):数据库的引入
Vue + Spring Boot 项目实战(五):使用 Element 辅助前端开发
Vue + Spring Boot 项目实战(六):前端路由与登录拦截器
Vue + Spring Boot 项目实战(七):导航栏与图书页面设计
Vue + Spring Boot 项目实战(八):数据库设计与增删改查
Vue + Spring Boot 项目实战(九):核心功能的前端实现
Vue + Spring Boot 项目实战(十):图片上传与项目的打包部署第二部分
Vue + Spring Boot 项目实战(十一):用户角色权限管理模块设计
Vue + Spring Boot 项目实战(十二):访问控制及其实现思路
Vue + Spring Boot 项目实战(十三):使用 Shiro 实现用户信息加密与登录认证
Vue + Spring Boot 项目实战(十四):用户认证方案与完善的访问拦截
Vue + Spring Boot 项目实战(十五):动态加载后台菜单
Vue + Spring Boot 项目实战(十六):功能级访问控制的实现
Vue + Spring Boot 项目实战(十七):后台角色、权限与菜单分配
Vue + Spring Boot 项目实战(十八):博客功能开发第三部分
Vue + Spring Boot 项目实战(十九):Web 项目优化解决方案
Vue + Spring Boot 项目实战(二十):前端优化实战
Vue + Spring Boot 项目实战(二十一):缓存的应用开源精选
Erupt Framework:开源神器,助你无需前端代码搞定企业级后台管理系统
AntdFront: React 纯 Hook 多标签微前端管理系统解决方案前言
之前写了一些关于 Java EE 的文章,主要是理论性质的,目的是帮助大家快速了解 Java EE 的核心内容,早日爬出这个陈旧又绕不开的坑,进入 Java Web 开发的新天地。当然只有理论是不够的,有很多细节需要在实践中理解,所以我决定做一个实践教程。
这个项目十分简单,是一个纯粹为教程而生的原型,可以视为一个简陋的带后台的门户网站。所以学习时不用有什么压力,估计你们学的比我写的快很多。
我的目标是根据这个教程,可以帮助 新入行的或是刚开始学习相关技术 的小伙伴们把一个完整的项目还原出来,建立起对前后端分离式 Web 开发的整体认知。
一开始,我会尽量详细地描述开发的过程,帮助大家快速上手。随着项目进展,曾经讲到过的、比较容易搜索到的内容会适当省略。
当然,每个人的理解方式不同,可能有些重要的细节没讲到位,欢迎大家在评论区提问。受限于个人水平,一定有很多说的不对的地方,大家理解一下,友善白嫖哈。
一、项目概述
这个项目我把它命名为 “白卷”,估摸着很多同学会拿它做课程设计之类,建议你们尽量加点自己的东西在里面,直接交白卷,你的良心不会痛吗?(狗头保命)
开个玩笑,叫白卷是因为它随着教程进展逐渐完善,象征着知识的从无到有,从有到多。
另外我还给它起了一个英文名字,叫 White Jotter(白色笔记本),纯粹是为了谐音。
项目遵循敏捷开发原则,会根据大家反馈的意见整理出新的需求,动态扩展、调整、优化。初始阶段按照简单的分层架构设计,具体见下图:
-
应用架构
-
技术架构
项目需要在前后端之间不断穿梭,但在做教程的时候,我会尽量模块化地去讲解。
此外,我把教程分为了几个阶段,是为了循序渐进、由易到难地讲解知识点。
各个阶段的主要内容如下(随教程进展更新):
(一)第一部分
这个项目的第一部分以图书信息管理为示例,主要帮助大家理解以下内容:
- 如何从 0 开始搭建 Web 项目?
- 什么是前后端分离?如何实现前后端分离?
- 单页面应用有哪些特点?
- 如何在 Web 项目中使用数据库并利用网页实现增删改查?
- 在开发中如何利用各种辅助手段?
- Vue.js 的基本概念与用法
- 简单的前端页面设计
- 如何部署 Web 应用?
各个页面的效果大致如下:
登录页面:
首页:
图书馆页面:
(二)第二部分
项目的第二部分是后台管理模块的开发,主要包括以下内容:
- 后台管理模块的常见功能与布局(内容管理、用户\权限管理、运维监控)
- 用户身份验证、授权、会话管理与信息加密存储
- Shiro 框架的使用
- 实现不同粒度的访问控制(动态菜单、功能控制、数据控制)
- 结合内容管理,实现文章的编写与展示
后台基本结构如下:
后台页面效果:Dashboard(from PanJiaChen / vue-element-admin):
图书管理:
用户管理:
笔记本页面效果:文章列表:
文章详情:
(三)第三部分
第三部分是在前面的基础上,分析项目存在的不足,并对其进行由点及面的优化。
当简单的优化无法达到我们想要的目的时,就需要从架构层面进行整体的升级改造,那就是下一套教程的事情了。
(四)开源精选
在做这个项目的过程中结识了一些小伙伴,他们凭借一腔热枕坚持为开源社区做贡献,开发出了许多优秀的项目。我打算在编写教程的同时穿插对这些项目的介绍,以便让更多朋友们了解这个群体,甚至加入到新兴项目的发展壮大过程中去。这样,也算是自己尽了一份绵薄之力吧!
此外,这个教程还有姐妹篇,也就是我正在更新的信息安全方面的教程。在攻防实践阶段,会把我们这个项目当作一号靶机,对黑客技术有兴趣的同学可以走一波关注:
二、技术栈
参考技术架构图,项目使用的主要技术如下:
1.前端技术栈
1.Vue.js
2.ElementUI
3.axios2.后端技术栈
1.Spring Boot
2.Apache Shiro
3.Apache Log4j2
4.Spring Data JPA
5.Spring Data Redis3.数据库
1.MySQL
2.Redis在开发过程中还会不断用到一些新的技术,有必要的我会增添上去。
三、主要参考内容
下一篇:Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目
有兴趣听我扯技术之外的故事的同学可以关注我的公众号。不定期更新,权当和大家聊聊天,图个乐子。
-
-
Vue + Spring Boot 项目实战(二):使用 CLI 搭建 Vue.js 项目
2019-04-02 07:19:11详细讲解如何使用 Vue CLI 搭建前端项目以及项目结构分析。本篇目录
前言
从这篇文章开始,就进入真正的实践了。
在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue。利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 Vue 的特性的。这点在接下来的内容中我们可以慢慢感受。
关于项目的构建其实类似的文章网上有很多,但我还是重新写了一下,一是为了确保项目能够运行成功,二是对几个细节作了解释,三是加入了使用 IDE 的构建方法。
在动手操作之前,我希望大家已经清楚什么是 “前后端分离” ,什么是 “单页面应用” 。
简单地说,前后端分离 的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互,而 单页面应用(single page web application,SPA),就是只有一张页面,并在用户与应用程序交互时动态更新该页面的 Web 应用程序。
附上 Vue 的官方教程:
https://cn.vuejs.org/v2/guide/这是第一手的学习资料,本篇的实践内容虽然用不上,但是日后要经常查阅。
一、安装 Vue CLI
因为需要使用 npm 安装 Vue CLI,而 npm 是集成在 Node.js 中的,所以第一步我们需要安装 Node.js,访问官网 https://nodejs.org/en/,首页即可下载。
图中左边是长期支持版本,右边是当前版本,下载哪个都行,我一般选择长期支持版本。下载完成后运行安装包,一路下一步就行。然后在 cmd 中输入
node -v
,检查是否安装成功。
如图,出现了版本号(根据下载时候的版本确定),说明已经安装成功了。同时,npm 包也已经安装成功,可以输入npm -v
查看版本号
输入npm -g install npm
,将 npm 更新至最新版本。
之后可以选择安装 cnpm,即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快,但是下载的包可能不是最新的。
安装 cnpm 的命令为 :
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后就可以使用
cnpm
替代npm
了,我不太喜欢用cnpm
,喜欢用的小伙伴注意一点,cnpm 不要与 npm 混合使用,一个项目用 cnpm 就从头用到底,不要中途敲错命令,否则就会出现混乱。不过万一遇到这种情况也不用慌,把项目的 node_modules 文件夹删了重新执行npm/cnpm install
就行了,只是比较浪费时间。
之后,使用
npm install -g vue-cli
安装脚手架。
注意此种方式安装的是 2.x 版本的 Vue CLI,最新版本需要通过npm install -g @vue/cli
安装。新版本可以使用图形化界面初始化项目,并加入了项目健康监控的内容,但使用新版本创建的项目依赖与这个教程不太相符,折腾起来比较麻烦。虽然我也想专门针对新的 CLI 和 Vue 3.0 重构一下教程,但想了想这是个无休止的工作,这个教程也不是为了讲前端框架的新特性,而且直到现在 Vue 3.0 也只是发布了初期试验版本,想必又是一堆依赖问题,所以就不折腾了。
二、构建前端项目
1.通用方法
直接使用命令行构建项目。首先,进入到我们的工作文件夹中,我在 D 盘新建了一个叫 workspace 的文件夹,大家可以自行选择位置。
然后执行命令vue init webpack wj-vue
,这里 webpack 是以 webpack 为模板指生成项目,还可以替换为 pwa、simple 等参数,这里不再赘述。 wj-vue 是我们的项目名称(White Jotter),大家也可以起别的名字。在程序执行的过程中会有一些提示,可以按照默认的设定一路回车下去,也可以按需修改,比如下图问我项目名称是不是 wj-vue,直接回车确认就行。
这里还会问是否安装 vue-router,一定要选是,也就是回车或按 Y,vue-router 是我们构建单页面应用的关键。
还有是否使用 es-lint,这玩意儿挺烦的,但为了代码质量先将就一下吧。接下来等待项目构建完成就 OK 了。
可以看到 workspace 目录下生成了项目文件夹 wj-vue,里面的结构如图
接下来,进入到我们的项目文件夹里(cd D:\workspace\wj-vue
),执行npm run dev
项目构建成功,这一步如果报错,可能是未能加载项目所需的依赖包,即 node_modules 里的内容,需要在该文件夹执行npm install
,再执行npm run dev
访问 http://localhost:8080,查看网页 demo,大工告成!
2.使用 IDE (IntelliJ IDEA)
对于习惯使用 IDE 的同学,可以使用更直观的方式构建项目。以 IntelliJ IDEA 为例,点击 Create New Project
然后选择 Static Web -> Vue.js,点击 next,输入相关参数
此处可以选择 CLI 的版本
这里注意 Project location 需要输入到项目文件夹一级而不是 workspace。输入完成后点击 Next,等待 Vue CLI 初始化,然后在可视化界面上确认项目信息,修改或 Next 即可。IDEA 构建出的 Vue 项目是不含 node_modules 的,所以要先调出终端,执行npm install
运行完成后,输入npm run dev
即可。
另外 IDE 嘛,总是在 UI 上下了很多功夫,我们还可以在 package.json 文件上点击右键,选择 show npm scripts
然后就会出来 npm 命令窗口,想要执行哪个命令直接双击运行就可以了。
这些命令都是在 package.json 文件里预定义的。dev 和 start 是一样的,start 即是执行npm run dev
命令
另外使用这种方法,可以激活 IDE 右上角的按钮,不过这些都不重要了。
上面的内容应该足够详细了,如果大家还是遇到了问题,可以在评论区反馈一下,我会第一时间解答。三、Vue 项目结构分析
1.概览
使用 CLI 构建出来的 Vue 项目结构是这个样子的
里面我们需要关注的内容如下图,重点需要关注的我用小红旗标了出来
其中我们最常修改的部分就是 components 文件夹了,几乎所有需要手动编写的代码都在其中。2.x 时代没有创建 view 这个目录,其实加上更加合理,现在我们姑且认为 Vue 把视图也当做“组件”的一部分,有助于初期的理解。
接下来我们分析几个文件,目的是看看各个部分是怎么联系到一起的。
2.index.html
首页文件的初始代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>wj-vue</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
就是一个普普通通的 html 文件,让它不平凡的是
<div id="app"></div>
,下面有一行注释,构建的文件将会被自动注入,也就是说我们编写的其它的内容都将在这个 div 中展示。还有不普通的一点是,整个项目只有这一个 html 文件,所以这是一个 单页面应用,当我们打开这个应用,表面上可以有很多页面,实际上它们都只不过在一个 div 中。
3.App.vue
上面图上我把这个文件称为“根组件”,因为其它的组件又都包含在这个组件中。
.vue 文件是一种自定义文件类型,在结构上类似 html,一个 .vue 文件即是一个 vue 组件。先看它的初始代码
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
大家可能注意到了,这里也有一句
<div id="app">
,但跟 index.html 里的那个是没有关系的。这个id=app
只是跟下面的 css 对应。<script>
标签里的内容即该组件的脚本,也就是 js 代码,export default
是 ES6 的语法,意思是将这个组件整体导出,之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。这个文件最关键的一点其实是第四行,
<router-view/>
,是一个容器,名字叫“路由视图”,意思是当前路由( URL)指向的内容将显示在这个容器中。也就是说,其它的组件即使拥有自己的路由(URL,需要在 router 文件夹的 index.js 文件里定义),也只不过表面上是一个单独的页面,实际上只是在根组件 App.vue 中。4.main.js
前面我们说 App.vue 里的
<div id="app">
和 index.html 里的<div id="app">
没有关系,那么这两个文件是怎么建立联系的呢?让我们来看入口文件 main.js 的代码import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
这里插一嘴,这个 js 文件有的同学可能看着不顺眼,比如没有分号(;),因为是 ES6 的语法,不这么写反而会提示错误,虽说可以把 es-lint 改了或者关了,但我想熟悉一下新的规则也挺好。
最上面 import 了几个模块,其中 vue 模块在 node_modules 中,App 即 App.vue 里定义的组件,router 即 router 文件夹里定义的路由。
Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。
在这个 js 文件中,我们创建了一个 Vue 对象(实例),el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标,router 代表该对象包含 Vue Router,并使用项目中定义的路由。components 表示该对象包含的 Vue 组件,template 是用一个字符串模板作为 Vue 实例的标识使用,类似于定义一个 html 标签。
看完了以上三个文件,我想基本上就对前端项目的结构有所了解了。下一篇中我将用一个例子解释前后端分离的项目是如何联系起来的。
查看系列文章目录:
https://learner.blog.csdn.net/article/details/88925013 -
Java项目实战
2017-12-27 13:36:57为大家分享一些Java项目实战,希望大家能够从里面中学习到自己想学的东西。Java项目实战
还久没更新博客,这次为大家分享一些Java实战项目。
1.电子地图系统
代代码以及文档链接:点击打开链接
2.决策分析系统
代码以及文档链接:点击打开链接
3.考试管理系统
代码以及文档链接:点击打开链接
4.数码照片管理软件
代码以及文档链接:点击打开链接
5.快递打印系统
代码以及文档链接:点击打开链接
6.通讯管理系统
代码以及文档链接:点击打开链接
7.编程词典用户管理系统
代码以及文档链接:点击打开链接
8. 企业进销存管理系统
代码以及文档链接:点击打开链接
9.企业内部通信系统
代码以及文档链接:点击打开链接
10.学生成绩管理系统
代码以及文档链接:点击打开链接
11.图书馆管理系统
代码以及文档链接:点击打开链接
12.开发计划管理系统
代码以及文档链接:点击打开链接
-
-
JMETER 性能测试入门到项目实战视频课程
2019-03-27 13:41:031、本课程针对JMETER软件性能测试八大组件:配置元件、前置处理器、定时器、sampler(采样器)、后 ... 置处理器、断言、监听器以及逻辑控制器等内容全方位讲解。... 2、参数化、badboy测试脚本开发以及录制方法,... -
Vue + Spring Boot 项目实战(三):前后端结合测试(登录页面开发)
2019-04-07 09:20:59构建 Spring Boot 项目并通过登录 DEMO 打通前后端的联系,为下一步开发打下基础。前面我们已经完成了前端项目 DEMO 的构建,这一篇文章主要目的如下:
一、打通前后端之间的联系,为接下来的开发打下基础
二、登录页面的开发(无数据库情况下)
本篇目录
前言:关于开发环境
每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text、Vim),但对我来说开发效率确实不如使用 IDE 高,所以就放弃了。不过需要修改某一代码片段时,使用编辑器还是比较便捷的。
虽说大家可以按照自己的情况任意选择工具,但做教程只能顾及其中一种,所以不好意思了读者大人们。
我比较习惯用 IntelliJ IDEA,在 Java 后端方面地位没得说,然而我前端也是用它做的。。。说实话没感到有什么不妥当的地方,界面什么的都和 WebStorm 差不多,只要不是只用 Eclipse 的同学,应该不会觉得别扭。
(用 Eclipse 的同学,是时候尝试改变了 /手动狗头)
第一篇文章也放上了 GitHub 的地址,有些小伙伴可能没看到,这里再放一遍:
https://github.com/Antabot/White-Jotter
追到第三篇的同学都是动手能力比较强的了,今天我测试了一下,按照项目的 README 运行基本没有问题,有兴趣的小伙伴可以搞一下,如果发现新的问题请在评论区指出,感谢。
一、后端项目创建
这个就很简单了。在 IDEA 中新建项目,选择 Spring Initializr,点击 Next
输入项目元数据,Next
选择 Web -> Web,Next
最后是项目名称和项目地址,Finish 后等待项目自动初始化即可。
运行 Application.java
访问 http://localhost:8080,发现弹出了错误页面,OK,这就对了,因为我们啥页面都没做啊。
二、登录页面开发
1.关于前后端结合
注意我们的项目是前后端分离的,这里的结合意思不是就不分离了,是如何把这俩分离的项目串起来用。
前面提到过前后端分离的意思是前后端之间通过 RESTful API 传递 JSON 数据进行交流。不同于 JSP 之类,后端是不涉及页面本身的内容的。
在开发的时候,前端用前端的服务器(Nginx),后端用后端的服务器(Tomcat),当我开发前端内容的时候,可以把前端的请求通过前端服务器转发给后端(称为反向代理),这样就能实时观察结果,并且不需要知道后端怎么实现,而只需要知道接口提供的功能,两边的开发人员(两个我)就可以各司其职啦。
艾玛做一个完整的教程真不容易,遇到的每个知识点感觉都能讲一堆。上次的文章被一位老哥反问是不是太着急了,也不知道是什么意思,我自己反思可能是讲的不够细吧,这里我就再啰嗦一下讲两句 正向代理 和 反向代理。
正向代理就是,你要访问一个网站,比如“谷弟弟”,然后发现访问不到,于是你访问了一个能访问到“谷弟弟”的代理服务器,让它帮你拿到你想浏览的页面。
反向代理就是,你访问了一个网站,你以为它是“谷弟弟”,但其实它是“谷姐”,“谷姐”知道你其实是想找她弟,就取回“谷弟弟”的内容给你看。作为用户的你,是不知道有这个过程的,这么做是为了保护服务器,不暴露服务器的真实地址。
知乎上有张神图可以描述这两种过程
2.前端页面开发
Login.vue
首先我们开发登录页面组件,右键
src\components
文件夹,New -> Vue Component,命名为Login
,如果没有 Vue Component 这个选项,可以选择新建一个 File,命名为Login.vue
即可。代码如下:<template> <div> 用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/> <br><br> 密码: <input type="password" v-model="loginForm.password" placeholder="请输入密码"/> <br><br> <button v-on:click="login">登录</button> </div> </template> <script> export default { name: 'Login', data () { return { loginForm: { username: '', password: '' }, responseResult: [] } }, methods: { login () { this.$axios .post('/login', { username: this.loginForm.username, password: this.loginForm.password }) .then(successResponse => { if (successResponse.data.code === 200) { this.$router.replace({path: '/index'}) } }) .catch(failResponse => { }) } } } </script>
<template>
标签中随便写了一个登录的界面,methods
中定义了登录按钮的点击方法,即向后端/login
接口发送数据,获得成功的响应后,页面跳转到/index
。因为之前我们设置了默认的 URL,所以请求实际上发到了http://localhost:8443/api/login
。AppIndex.vue
右键
src\components
文件夹,新建一个 directory,命名为home
,再在home
下新建一个Appindex.vue
,即首页组件,这里暂时不做过多开发,先随便写个 Hello World。<template> <div> Hello World! </div> </template> <script> export default { name: 'AppIndex' } </script> <style scoped> </style>
3.前端相关配置
设置反向代理
修改
src\main.js
代码如下:import Vue from 'vue' import App from './App' import router from './router' // 设置反向代理,前端请求默认发送到 http://localhost:8443/api var axios = require('axios') axios.defaults.baseURL = 'http://localhost:8443/api' // 全局注册,之后可在其他组件中通过 this.$axios 发送数据 Vue.prototype.$axios = axios Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
因为使用了新的模块
axios
,所以需要进入到项目文件夹中,执行npm install --save axios
,以安装这个模块。配置页面路由
修改
src\router\index.js
代码如下import Vue from 'vue' import Router from 'vue-router' // 导入刚才编写的组件 import AppIndex from '@/components/home/AppIndex' import Login from '@/components/Login' Vue.use(Router) export default new Router({ routes: [ // 下面都是固定的写法 { path: '/login', name: 'Login', component: Login }, { path: '/index', name: 'AppIndex', component: AppIndex } ] })
跨域支持
为了让后端能够访问到前端的资源,需要配置跨域支持。
在
config\index.js
中,找到 proxyTable 位置,修改为以下内容proxyTable: { '/api': { target: 'http://localhost:8443', changeOrigin: true, pathRewrite: { '^/api': '' } } }
注意如果不是在最后的位置,大括号外需要添加一个逗号。
运行项目
执行
npm run dev
,或双击 dev(start 也一样)脚本,查看登录页面效果。注意地址是
localhost:8080/#/login
,中间有这个#
是因为 Vue 的路由使用了 Hash 模式,是单页面应用的经典用法,但连尤雨溪本人都觉得不太好看,所以可以在路由配置中选择使用 History 模式,但会引发一些问题,需要在后端作出处理,所以这里先不更改,之后我单独写一篇关于这个的文章。
教程的内容简化了一下,我做的是这个样子的。。。
呃,总之这个页面的功能都是一样的。4.后端开发
User 类
在
Login.vue
中,前端发送数据的代码段为.post('/login', { username: this.loginForm.username, password: this.loginForm.password })
后端如何接收这个 JS 对象呢?我们很自然地想到在需要创建一个形式上一致的 Java 类。
打开我们的后端项目
wj
,首先在src\main\java\com\evan\wj
文件夹(就是你自己的 web 项目的包)下,新建一个pojo
包(package),然后新建User
类,代码如下package com.evan.wj.pojo; public class User { int id; String username; String password; public int getId() { return id; } public void setId(int 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; } }
Result 类
Result 类是为了构造 response,主要是响应码。新建
result
包,创建Result
类,代码如下package com.evan.wj.result; public class Result { //响应码 private int code; public Result(int code) { this.code = code; } public int getCode() { return code; } public void setCode(int code) { this.code = code; } }
实际上由于响应码是固定的,
code
属性应该是一个枚举值,这里作了一些简化。LoginController
Controller 是对响应进行处理的部分。这里我们设定账号是
admin
,密码是123456
,分别与接收到的User
类的username
和password
进行比较,根据结果返回不同的 Result,即不同的响应码。前端如果接收到成功的响应码(200),则跳转到/index
页面。在
wj
下新建controller
包,新建LoginController
类,代码如下package com.evan.wj.controller; import com.evan.wj.result.Result; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import org.springframework.web.util.HtmlUtils; import com.evan.wj.pojo.User; import java.util.Objects; @Controller public class LoginController { @CrossOrigin @PostMapping(value = "api/login") @ResponseBody public Result login(@RequestBody User requestUser) { // 对 html 标签进行转义,防止 XSS 攻击 String username = requestUser.getUsername(); username = HtmlUtils.htmlEscape(username); if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) { String message = "账号密码错误"; System.out.println("test"); return new Result(400); } else { return new Result(200); } } }
这里只是为了演示前后端的交互过程,真正的登录验证要考虑更多因素,后面的文章会有详细介绍。另外教程初期对项目结构做了一些简化,实际上在 controller 里写这么多逻辑是不合理的,要尽量封装到 service 里面去。
最后,在
src\main\resources
文件夹下找到application.properties
文件配置端口,即加上server.port=8443
(初始应该是空白的,后期还要配置数据库等)5.测试项目
同时运行前端和后端项目,访问
localhost:8080/#/login
,输入用户名admin
,密码123456
点击确定,成功进入localhost:8080/#/index
通过这篇文章,希望大家可以直观地感受到前后端分离项目中前后端的过程,之后的功能开发基本思路就是在后端开发Controller
,在前端开发不同的组件,这个顺序可以随意。实际的项目应该是前后端人员根据功能需求约定好接口,然后齐头并进,以提高开发效率。接下来一段时间需要写的内容大概有以下这些:
- 数据库的引入
- 后端拦截器的配置
- 部署项目时会遇到的一些坑
- 使用 Element 辅助前端开发
- 公共组件的开发
顺序我再想一想,教程做的比较慢,大家可以在 GitHub 上看项目的进度。
查看系列文章目录:
https://learner.blog.csdn.net/article/details/88925013 -
php初级到项目实战
2016-09-25 10:41:04本套php为完整的从初级到smarty,thinkphp,ecshop项目实战,课程安排循序渐进,通俗易懂 -
【SSH网上商城项目实战30】项目总结(附源码下载地址)
2016-05-27 15:44:08项目基本完成了,加上这个总结,与这个项目相关的博客也写了30篇了,积少成多,写博客的过程是固化思路的一个过程,对自己很有用,同时也能帮助别人。顺便说个题外话,在学习的过程中肯定会遇到很多异常出现,我们要... -
linux 从入门到项目实战课程
2020-03-11 18:59:56课程目标: 通过本套基础+实战课程的全程学习,提升运维能力,课程风格注重实践,每个知识点都有案列,通过本课程系统的... 课程项目实战篇b2b2c 电商平台部署网络拓扑图 卖家平台部署效果 -
mxgraph进阶(三)Web绘图——mxGraph项目实战(精华篇)
2016-06-14 16:01:46Web绘图——mxGraph项目实战(精华篇)需求 由于小论文实验需求,需要实现根据用户日志提取出行为序列,然后根据行为序列生成有向图的形式,并且连接相邻动作的弧上标有执行此次相邻动作的频次,每个动作另附有一个... -
Javaweb商城项目实战篇
2019-07-24 22:23:36本门课程核心围绕javaweb实战网上商城项目作为基础,其中讲解数据结构的搭建以及项目细节的实战和项目上线流程等内容。课程主要包括: 第1章 Javaweb项目实战——搭建和登录注册模块 ...Javaweb项目实战—订单模块 -
JavaScript+jQuery+项目实战系列视频教程
2016-10-27 17:02:06JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能,能完成基本的网页特效! -
Hadoop项目实战:新闻离线项目分析
2019-01-13 21:50:13本课程为项目实战课,项目各个环节既深入讲解理论知识,又结合项目业务进行实操,从而达到一站式掌握大数据离线项目。 -
flutter高仿微信项目实战
2018-10-28 22:34:11Flutter案例视频教程,从入门到具体项目实战,Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。flutter高仿微信项目实战是一个使用flutter技术仿微信界面开发的完整案例,同时提供... -
Tensorflow2项目实战课程
2019-03-14 15:37:34课程会从0开始学习,从python环境安装,python入门,numpy,pandas,matplotlib使用,深度学习基础,一直讲到tensorflow基础,进阶,项目实战。不管你是0基础小白,想进入AI行业,还是有一定基础,想学习最新的... -
CSS梅兰商城项目实战
2016-03-17 17:13:25本套CSS项目实战课程为制作梅兰商城首页,以网页布局定位的基础知识为依托,灵活运用CSS的全部知识和小技巧,带你深入剖析经典网页的制作过程,同时涉及到了CSS样式的初始化、版心控制、精灵图的使用、搜索引擎优化... -
原生PHP商城项目实战
2019-05-10 11:26:36基础php和html+css等结合,采用MVC结构,打造纯原生商城。整个过程从0到1,具体完整。 课程难点: 项目实战使用大量 网站业务 逻辑,对于新手没有接触和开发经验的人比较棘手。 -
Flink1.8实时数仓项目实战
2019-08-26 18:10:00《Flink1.8实时数仓项目实战》课程主要基于Flink**稳定版本进行讲解,课程包含Flink DataSet、容错、Connector、Flink SQL以及实时数仓项目。希望通过本课程的学习,大家能快速掌握Flink 批处理和Flink SQL,并通过... -
Flink项目实战系列(Spark项目实战系列)
2019-08-08 10:09:21本人的知识星球内发布了大量的Flink和Spark的项目实战,文章的目录如下: 初识Flink Flink读取Kafka源码解读 Flink的状态后端 Flink的runtime Flink系列之数据流编程模型 Flink系列之checkpoint Flink系列之... -
Flink1.8实时电商运营项目实战
2019-08-26 18:35:27《Flink1.8实时电商运营项目实战》基于某电商公司运营实时分析系统(2B),对Flink DataStream进行全面系统的讲解。通过本课程的学习,既能获得Flink企业级真实项目经验,也能深入掌握Flink DataStream的核心理论... -
Java学习指南 Swing项目实战篇
2019-08-18 21:06:05本课程是基于Java Swing 技术的项目实战教程,每章为一个项目实例。前置课程为 Swing入门篇 和 Swing高级篇。 以下项目中,界面部分使用 Swing 实现,为了实现项目需求,一般还会结合使用 Swing 之外的技术。 ... -
大数据项目实战二之电信大数据项目
2018-07-20 15:26:15大数据项目实战之电信大数据项目 生产日志-&amp;amp;amp;amp;gt;kafka采集-&amp;amp;amp;amp;gt;kafka API的控制台展示 -&amp;amp;amp;amp;gt;HBASE(创建命名空间,创建表)-&... -
Vue + Spring Boot 项目实战(四):数据库的引入
2019-04-14 12:20:35在项目中引入数据库,实现通过数据库验证用户名与密码。
-
服务架构发展历史
-
广州大学数值分析学习资料.zip
-
QT 拼图游戏
-
【2021】Python3+Selenium3自动化测试(不含框架)
-
sqlite-amalgamation
-
国家注册信息安全工程师体系课程(CISP-PTE)
-
前端性能优化
-
微服务系列第七十一季-Spring入门
-
浙江、江苏移动数码SM代工M301H 不拆机room
-
Discourse 如何设置 API 的 key
-
阿里巴巴-大数据工程师必读手册.pdf
-
python大作业学生成绩管理系统.zip
-
一个很不错的visual c++ vc内存池的源码,本人在项目中使用.很有价值.zip
-
QT 多文档文本编辑器
-
迈向高级的Java面试突围课
-
Java星选一卡通
-
【数据分析-随到随学】SPSS调查问卷统计分析
-
Swiper组件(一)-- 使用
-
FFmpeg4.3系列之26:视频监控之H265多路摄像头播控项目实战
-
软件工程与项目案例.pptx