web应用开发整理笔记

qq_48904250

已于 2024-04-17 08:50:50 修改

阅读量976

点赞数 26

文章标签：笔记 java vue.js

于 2024-04-15 18:51:46 首次发布

本文链接：https://blog.csdn.net/qq_48904250/article/details/137787508

版权

前言

哔哔赖赖一下，突然想起来写这篇笔记，给大家闲扯一下web开发的流程，是为了求各位大佬帮忙指正错误，顺便看看自己掌握的状态。毕竟也是去年开始成了打工仔，学的东西很杂，最近才串联起来。大环境不好，真难啊，大家多相互交流，能给别人说明白，才算是基本掌握了。不水了，我接下来前端讲到后端，不会太细致，毕竟是流程梳理，求大佬们理解一下，白嫖可以，但别吵架哈。

前端开发流程

工具准备

安装工具：Download | Node.js

配置环境变量：此电脑=>高级系统设置=>高级下环境变量path里加入安装的路径

安装完node -v，测试是否安装配置完成

配置快速安装镜像：npm config set registry https://registry.npm.taobao.org

前端框架

这里拿vue举例，工具大家可替换，还是相信大家的信息检索能力的

1、安装框架：npm install vue -g

2、搭建脚手架：npm install vue-cli -g

3、安装打包工具：npm install webpack -g，高版本需要安装webpack-cli，npm install webpack-cli -g

4、安装路由：npm install vue-router -g

5、UI库安装：ElemenUI，layUI， Ant Design等等，npm i element-ui

6、分模块编译：学术点叫面向切面的编程，把文件分类：

config：构建配置目录；配置路径端口值等（代理到后端）
assets：用于存放资源文件
components：用于存放Vue功能组件
views：用于存放Vue视图组件
router：用于存放vue-router配置
untils:用于存放复用函数
style：用于存放样式
store：用于存放存储信息
package.json：项目描述文件

7、前端代理：Nginx，将npm run build后的包放在linux系统下dist 目录下的 static 和 index.html）放入 Nginx 的 html 文件夹中

后端开发流程

工具准备

IDEA(编译器)记得向公司申请license，毕竟不便宜，JDK（调试器）配置环境变量此电脑=>高级系统设置=>高级下环境变量path里加入安装的路径，Maven（插件加载工具）file=>other setting里搜Maven，配置路径，版本适配就不多说了，大家自己检索，后面数据库可用Navicat，麻烦的是只有两个周试用期，企业的话，还是根据内部工具来，个人可用网友们网盘里的资源里带的crack破解

环境准备

安装数据库MySQL，同样记得配置环境变量此电脑=>高级系统设置=>高级下环境变量path里加入安装的路径

(1)、与bin目录同级别的地方新建my.ini配置文件

[mysqld]
#目录一定要换成自己的
basedir=D:\MySQL\mysql-5.7.19\
datadir=D:\MySQL\mysql-5.7.19\data\
port=3306
#如果在运行mysql过程中，该服务自动停止的要注释掉下面这一行代码。
#skip-grant-tables

（2）、 mysqld --initialize-insecure --user=mysql，进行初始化数据文件。

（3）、mysql -u root -p进入mysql管理界面（密码可为空，-p后面不要加空格）出现enter password,之后，我们不要设置密码，直接回车即可。如果没有出来enter password,我们可以再输一遍mysql -u root -p，如果还不行，可以把my.ini文件的最后一行注释掉即可，及前面加一个#即可。

（4）、进入界面后更改root密码。即输入update mysql.user set authentication_string-password('123456') where user='root' and Host='localhost';

（5）、授权给root，输入ALTER USER 'root'@'localhost' IDENT IFIED BY '123456';

输入flush privileges;刷新权限

安装缓存Redis，注意cmd所在的路径一定要redis-server.exe所在的目录>redis-server.exe redis.windows.conf，redis-cli.exe -h 127.0.0.1 -p 6379

新建springboot框架，

这个就很简单了。在 IDEA 中新建项目，选择 Spring Initializr，点击 Next
在这里插入图片描述
输入项目元数据，Next

选择 Web -> Web，Next

最后是项目名称和项目地址，Finish 后等待项目自动初始化即可。

pom.xml里配置依赖，缓存的Redis，数据库，数据库映射mybatis,hibernate，权限shiro，Tomcat代理，配置完Maven插件的刷新按钮刷新就行

分模块编译：把文件分类

config：@Configuration定义的构建配置目录；配置路径端口值等
resource/static：用于存放资源文件
resource/application.properties：用于存放连接（gzip压缩服务可定义在这里，
server.compression.enabled=true
# 支持压缩的源文件类型
server.compression.mime-types=application/json,application/xml,text/html,text/xml,text/plain,application/javascript,text/css
server.compression.min-response-size=1024
）
dao：用于存放@Mapper定义的映射
entity：定义存放@Data@Entity自定义类
controller：用于存放@Controller定义的api
filter：用于存放路径过滤
service：用于存放@Service定义的数据服务，servlet（服务器服务也在此）
untils:用于存放复用函数
exception：用于存放定义报错信息
pom.xml：用于存放配置文件

后端代理：Tomcat，npm run build后放在linux系统下Tomcat下的bin目录下，startup.sh启动，shutdown.sh关闭服务