Web项目运行与开发_有一个前端项目应该怎么运行

---

前言

本篇文章包含web的一些基本操作与可能基础出现错误的地方说出来，也是按我自己理解的思路写的，可以给大家参考一下

一、运行web项目所需要的基本应用

1.IntelliJ IDEA

（1）IntelliJ IDEA这个应用的下载，已经在上一个文章说过了，如果还有没下载的同学们可以过去看看如何下载，我就不在这里细说啦。
（2）Maven安装与配置同样在上一个文章说了，每运行一个新项目时都需要配置好，不然会显示一系列的错误，所以当你运行新项目出现错误时可以去设置里面看看是否修改成自己的maven路径修改完后，再运行，一般来说，如果代码没有错误都会运行成功下去了
（3）当你运行项目时，记得修改yml里面一些内容，如下

框1为端口号，查询时端口号需要一致，不然也会出现一系列错误
框2为用户名
框3为用户密码，需要与你设置的sqlyog数据库创建的密码一致，当然用户名也是一样
框4为添加数据源，可以指定代入相应数据，但是特别注意指定的数据名称一定跟你相应的那个一样，就比如我使用的是

框里面那个数据webdb，所以在url: jdbc:mysql://localhost:3306/后面添加webdb指定，这样会减少出现错误
（4）做完以上操作，一般一个项目代码没有出现错误，就已经可以完成运行起来了，如果会出现错误，可以私信我，或者询问老师当然更可以自己探索查找博客，bibi等等，因为自己探索可以让自己印象更加深刻，就是时间浪费多一点点

2.SQLyog

（1）这个也在上一个文章说过了，需要的也回上一个文章看啦。

（2）sqlyog是一款易于使用、快速而简洁的MySQL数据库图形化管理工具，可以直观的在任何地点管理你的数据库。SQLyog实现的功能主要有：备份恢复数据库、简单的SQL编辑操作、数据库设计、数据导入导出、数据结构和数据同步等等，与web与有着密切的关系

3.Visual Studio Code

（1）Visual Studio Code可以直接在应用商店进行下载，这个运行非常简单，在等一下在下面也会有相关运行操作，这里就不细说了
（2）Visual Studio Code想转中文版的如图：

（3）Visual Studio Code前端文件详情说明

4.Postman

（1）postman安装步骤：

访问postman官方网站，下载最新版本，访问地址：postman安装下载地址，请点击
进入到下载页面，根据自己电脑下载对应的版本

（2）postman是一款支持http协议的接口调试与测试工具，其主要特点就是功能强大，使用简单且易用性好 。无论是开发人员进行接口调试，还是测试人员做接口测试，postman都是我们的首选工具之一 。那么接下来就介绍下postman到底有哪些功能，它们分别都能干些什么 。为了能更加全面的体现这款工具的特点，我将从以下三个维度来加以说明。它们分别是：

 基础功能
 - 常见类型的接口请求
 - 接口响应数据的解析
 - 接口管理(Collection)
 - 批量执行接口请求
 - 日志调试
 - 断言
 - 变量
 - 请求前置脚本
 - 接口关联
 - 常见的返回值获取
便捷功能
 - 快速填写查询参数
 - 快速填写请求头信息
 - 快速实现添加一个请求
 - 如何继承集合认证
 - 批量断言
 - 快速查询和替换
高级功能
 - 读取文件进行参数化
 - 生成测试报告
 - 代码中发送请求
 - 编写接口文档
 - mock服务
 - 监控
 - 使用工作空间
 - 代码同步与分支管理
 - 连接数据库
 - apis
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

（3）有部分操作在下面有详细说明了，大家可以耐心往下看

二、前端项目运行

1.使用Visual Studio Code运行前端

可以参考一下我们老师分享给我学习笔记

1. :\java\webgrd-web 设置淘宝镜像： npm config set reistry http://registry.npm.taobao.org/
2. 初始化 npm install
3. 标题在 src/setting.js src\utils\get-page-title.js src\layout\components\Sidebar\Logo.vue
4. 首页： src\router\index.js
5. vue.config.js 配置当前环境的端口
6. 阿里巴巴矢量图库
7. 安装element组件 npm i element-ui -S（这个中间有可能会出现版本过高或者过低情况，想知道的同学的自己查博客或者等我后期发布，其实也不难，相信大家可以自己解决）
8. main.js import locale from ‘element-ui/lib/locale/lang/en’ // lang i18n en改为zh-CN 分页页面中的字就会改成中文
9. ctr+ p 快速打开一个文件

实现一个模块需要做的工作：
1. 设置路由（左边的菜单）：
router/index.js

2. api/userManage.js  新建自己的路径维护js

3. 在view新建模块文件 sys

4. 在view/sys 下新建你的vue文件  html

后端实现：
1. UserController
列表、新增、修改、删除

mybatisplus 实现自动生成源码：
1. pom.xml 增加依赖
<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

        <dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-boot-starter</artifactId>
			<version>3.5.3</version>
		</dependency>
		<dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-generator</artifactId>
			<version>3.5.3</version>
		</dependency>
        <dependency>
			<groupId>com.mysql</groupId>
			<artifactId>mysql-connector-j</artifactId>
			<scope>runtime</scope>
		</dependency>

2. yml配置
server:
    port: 8080

spring:
    datasource:
        username: root123
        password: root123
        url: jdbc:mysql://localhost:3306/webdb
        driverClassName: com.mysql.cj.jdbc.Driver

    redis:
        host: localhost
        port: 6379

mybatis-plus:
    mapper-locations: classpath:weburl/*.xml  #注意这里的配置格式，分两行 或者classpath:后有空格均不成功
    type-aliases-package: com.webgrd.*.entity
    global-config:
        db-config:
logic-delete-field: deleted # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)
            logic-delete-value: 1 # 逻辑已删除值(默认为 1)
            logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)
logging:
    level:
        com.webgrd: debug
3. 实现拦截器 MybatisPlusConfig 类
4. CodeGenerator 实现自动生成源码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

2.运行文件

1.为了防止运行其他的项目，我们可以先集成终端中打开，然后再打开输入栏npm run serve

2.如果出现这种状况，先别慌，可能是以为上面1的那个原因
我们就先把它集成终端后再运行

你看这样就成功了（其实自己动手查一查，后面就可能会觉得并不是那么难了），然后复制连接或者打开链接，前端就会以浏览器的形式打开了

三、应用开发

1.登录部分功能优化

• 1. 生成token方式
     
• 2. 获取用户信息
     
     

2.登录功能

• 1.登录：http://localhost:8080/weburl/user/login

{
“userid”: “admin”,
“password”: “123456”
}

• 2.获取用户信息，需要前面登陆成功的token复制过来，然后再下面的token右边粘贴过去，当然token也是需要自己打上去才有，大多数除了上面的登陆获取token外，多数都使用到这个token与Value的粘贴

3.Postman

1.简单页面说明，大家可以简单了解一下，再动手操作

2.Postman运行中所遇到的错误

-（1） Postman请求报405错误，Method not Allowed

第一步，排查代码注解原因
POST请求之后，后台报405 Method not Allowed
a request was made of resource using a request method not supported
by that resource ,
for example Using GET on a form which requires data to be presented via POST ,
or Using PUT on a read-only resource
（使用不支持的请求方法请求资源通过该资源，例如，在需要通过POST呈现数据的表单上使用GET，或在只读资源上使用PUT。但是发现自己使用的是POST请求，后段也是对应的POST处理参数，所以问题不在这）

第二步，查看Springboot启动类所在模块是否依赖该接口所在模块
有可能是自己maven配置文件里面多加了version和scope，猜想可能是scope限制了扫描范围，导致这个模块的所有接口未被发现，没有发现的接口调用则会导致405错误，menthod not allowed，至此排查结束
-（2） 使用Postman做接口测试时报415错的原因及解决方法

报错示例：

{
    "type": "zx1890.com/problem-with-message",

    "title": "Unsupported Media Type",

    "status": 415,

    "detail": "Content type 'application/xml;charset=UTF-8' not supported",

    "path": "/admin/data/export/company",

    "message": "error.http.415"

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

问题原因及扩展：

1…原因

Media Type，即是Internet Media Type，互联网媒体类型，也叫做MIME类型，有时在一些协议的消息头中叫做“Content-Type”。它使用两部分标识符来确定一个类型。
例如： Content-Type: text/html;charset:utf-8;

2…扩展

常见的媒体格式类型如下：

text/html  ：HTML格式
text/plain ：纯文本格式      
text/xml   ：XML格式
image/gif  ：gif图片格式    
image/jpeg ：jpg图片格式 
image/png  ：png图片格式
以application开头的媒体格式类型：

application/xhtml+xml ：XHTML格式
application/xml       ：XML数据格式
application/atom+xml  ：Atom XML聚合格式    
application/json      ：JSON数据格式
application/pdf       ：pdf格式  
application/msword    ：Word文档格式
application/octet-stream ：二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded  ：<form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
另外一种常见的媒体格式是上传文件之时使用的：

multipart/form-data  ：需要在表单中进行文件上传时，就需要使用该格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

以上就是我们经常会用到的content-type的内容格式。通过此例中message信息，表示该post请求不支持“text/plain”纯文本格式类型。
3…解决方法
修改请求Body->raw的数据类型为JSON，如下图：

• （3）解决postman报错 “status“: 500, “error“: “Internal Server Error“
  在测试接口时出现500（Internal Server Error），5xx系列的错误一般指服务器端的错误，可以先检查测试时参数是否输入正确。我出现这个问题是因为后台和数据库交互的代码中errKey单词书写错误，写成了errKen，idea中并不会报错，但是测试接口时会出现错误。所以出现500（Internal Server Error）时也要检查一下后台的代码是否有一些小问题。

将代码修改后：
我就错误点暂时总结这一些了，希望对大家有用。

四、总结

以上是我学web开发，所了解的部分内容，分享给大家，一起来学，一起找错误，共同解决，在上面的项目运行中其实我不止遇到了那一些错误而已，不过最后我通过博客也一一解决了，如果你出现错误了，而上面没有可以私我哦！我不一定会，但是可以一起讨论并解决了，熟话说三个臭皮匠比过一个诸葛亮嘛！
上面博文可能也写得有点乱，也请大家谅解，请大家多多指教！