第一个前后端分离的web项目
前言
现在,开发系统是一个很火的潮流,尤其是随着数据的越来越大,前后端分离就变得势在必行,这两天刚好要开题,就跑了一个前后端分离的代码。首先我们介绍后端的流程
后端的相关操作
我们后端运行的框架就是流行的SSM(SpringMVC+Spring+mybatis )框架。这个框架下的代码示意图如图所示:
一、运行前准备:
1、首先下载jdk,然后将其在自己电脑上进行配置环境变量,配置过程网上很多,因此就不多说了。最后配置好之后,一定要进行检查,结果如图所示:
2、接着安装eclipse或者IDEA。 3、通过eclipse或者IDEA工具上安装Apache-maven。 4、在官网下载安装mysql5.7。 5、由于在启动项目时,需要redis作为数据缓存,因此我们还的下载redis 到此为止,我们后端的环境就已经搭好了,这里需要注意的是:我们安装的相关服务必须装在全英文的路径下,系统不识别中文,否则有可能会报错。接下来就要配置我们的服务了。将该项目导入eclipse中。找到src/main/resources包下的application.yml配置文件,具体位置如图所示:
然后找到mysql的地方,将数据库名和密码换成自己对应的,否则是连不上的。具体如图所示:
一般到此我们就可以运行了,不过也有少部分人将自己的redis设置密码,这个时候还得在配置文件设置自己的密码。具体如下图所示:
二、启动后台服务
1、在redis所在的地方启动redis 2、在你项目所在的位置将其打包,例如我的项目位置在
F:java_progressnlp_backendnlp_backend
然后利用win+R快捷键启动该黑屏终端。然后再该黑屏终端输入如下命令:
mvn clean
mnv install
具体操作如下:
运行成功之后会出现一个target包,如图所示:
我们进入该target包,然后再次打开黑屏终端,输入如下命令启动后台:
java -jar xxx.jar //这里为了以防输入拼写错误,我们最好输入前三个字母后,按Tab键自动将其补全
但是在启动之前,确保你的redis和mysql服务是开启的,否则会报拒绝连接的错误。具体操作如下:
上面黄色字体大家可能看不清楚,意思是只要后台出现Started SpringBootStartUp in 13.897 seconds字样时,就说明我们后台启动成功了。接下来不能关了后台,因为运行前端代码,后台必须开启。接下来我们开启前端服务。
前端的相关操作
我们前端采用的是流行的HTML+Vue框架,运行的环境是nodejs。同样的,我们首先看前端的框架,具体框架如图所示:
一、运行前准备:
1、首先在官网下载并安装nginx,并且将tomcat配置进去。首先我们打开nginx所在目录,并且利用start nginx启动nginx。接下来打来nginx.conf配置文件将其对应的后端配置upstream以及相应的location。具体输入以下命令:
upstream backend {
server 127.0.0.1:8000;
}
location ^~ /my_app/ {
proxy_pass http://backend;
}
具体配置如下图所示:
这里需要注意的是:**upstream的名字必须与你后端的名字一致;并且在location配置的时候也是必须要写你后端项目的名字。**然后保存该配置,重新启动nginx服务。 2、接下来下载并安装以及配置nodejs。配置好之后一定要检查。在黑屏终端中输入如下命令
node -v
npm -v
具体过程如下图
3、用npm安装cnpm库,并且要将其配置环境变量。安装完成后检查如下:
cnpm -v
到此为止,我们前端运行环境搭建完毕,同样需要注意的是,我们的所安装的路径必须是全英文的。 接下来我们启动前端。
二、启动前台系统
1、在启动之前确保nginx启动成功。并且保证后台服务器开启正常。 2、在前端项目所在位置打开黑屏终端,输入以下命令:
cnpm clear
cnpm install
具体效果如下图:
运行完成该命令后,该项目路径下会出现一个node_modules包,如下图所示:
3、接下来在该项目的路径下打开黑屏终端,然后输入以下命令:
cnpm run dev
启动成功后在浏览器输入localhost:8080打开网页。具体如下图所示:
到此为止,前台启动成功。
总结
随着数据不断增大,客户的需求也来越复杂,系统的结构也会很多,因此,前后端分离是大势所趋,借此机会,大致学了如何启动一个前后端分离的web项目以及相关的环境搭建,谨以此作为笔记供自己观看,同时也希望能够给学web开发的小伙伴们带来一点启发,如果以后有时间会随时更新的。
- 使用SQL Server Management Studio 2008 将数据库里的数据导成脚本
- jquery mobile 移动web(5)
- [C#6] 1-using static
- WordPress 中的 Debug 模式(调试模式)
- Windows Server 2008 R2 Server Core 的 Microsoft .NET Framework 4安装程序
- [C#6] 4-string 插值
- 使用API Key验证WCF Data Service
- WordPress By Example:一个WordPress 主题搜索引擎
- jquery mobile 移动web(4)
- [C#6] 3-null 条件运算符
- ServiceStack.Redis 使用教程
- WordPress 标签页面只有一篇文章时自动跳转到该文章
- OS X 上使用.NET开发应用程序
- [C#6] 2-nameof 运算符
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python基于stuck实现scoket文件传输
- Python %r和%s区别代码实例解析
- Python基础类继承重写实现原理解析
- python torch.utils.data.DataLoader使用方法
- Android自定义橡皮擦效果
- Android Canvas drawText文字居中的一些事(图解)
- Nginx+keepalived一主一从高可用,手把手带你一步一步配置!
- Behave!:一款针对页面活动的浏览器监控插件
- R可视化 | 地理信息空间(上)
- Nautilus:一款基于语法的反馈式模糊测试工具
- R可视化 | 地理信息空间(下)
- 21页优雅读博指南:佐治亚理工学院助理教授Eric Gilbert撰写,入坑前必读
- Too old resource version 引起 Flink JobManager 崩溃的问题定位
- SharpHose:一款基于C#开发的Windows异步密码喷射工具
- PyTorch版YOLOv4更新了,不仅适用于自定义数据集,还集成了注意力和MobileNet