Web开发进阶指南：掌握关键知识点，高质量完成项目

最新推荐文章于 2024-06-14 11:01:38 发布

Yane~

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量891

点赞数 25

文章标签：前端

本文链接：https://blog.csdn.net/2203_75947125/article/details/135114886

版权

前端 VS. 后端

一开始一定要分清前端开发和后端开发，我们来分别介绍一下。

前端

Web应用被分类归为分布式应用，一般是客户端——服务器结构，所以我们有一部分的代码运行在客户端，另一部分代码运行在服务器。那些在客户端上的应用就是前端，通常指的就是我们的浏览器。最常用于前端开发的技术是HTML+CSS+JavaScript，高级的前端开发人员通常使用这些技术的组合开发应用的前端，另一个前端的常用技术就是使用Photoshop设计，配合其他技术共同完成Web页面的制作。

后端

后端开发者编写那些运行在服务器上的代码，通常来说，这部分的工作需要和数据库打交道，比如读写数据、读写文件、实现业务逻辑等。有些时候，业务逻辑存储在客户端，这时后台就是用来以Web服务的形式提供数据库中的数据。后端开发者一般需要掌握一种Web编程语言和一个数据库管理系统。

你可以同时掌握前端和后端的技术，但大多数Web开发者都还是有一定的喜好偏向，甚至只在某一方面深入研究。尽管前后端是有区分的，但并没有规定它们各自的具体任务。有时前端只是完成数据的显示，而其他主要工作都在后端完成。但也有时，后端只是提供数据，而所有的计算和具体功能都在前端完成。前后端工作的分配，通常都是由项目的设计和架构来决定的。

开发模式

混合开发模式-mvc开发模式-前后端分离模式，各有利弊。

混合开发：简单成本低，适合小型系统开发，

mvc开发模式：解耦前后端，后端三层架构，效率更高，前端数据的传参，收参问题，仍然是后端负责；

前后端分离：完全的前后端分离，前端有自己服务器，解决一系列的路由、传参、收参问题。

前端的发展
html（静态页面）+CSS+JavaScript->jsp（动态页面）+CSS+jquery（JavaScript库）->vue+CSS

前端比较好用的模板：bootstrap后台模板，网站模板之家

组件库：layui, bootStrap, semantic-ui,element-ui

测试接口展示

替换依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.7.5</version>
		<!--      <relativePath/> &lt;!&ndash; lookup parent from repository &ndash;&gt;-->
	</parent>
	<groupId>com.webgrd</groupId>
	<artifactId>demo_websrv</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<name>demo_websrv</name>
	<description>demo_websrv</description>
	<properties>
		<java.version>8</java.version>
	</properties>

	<dependencies>
		<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>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web-services</artifactId>
		</dependency>

		<dependency>
			<groupId>com.mysql</groupId>
			<artifactId>mysql-connector-j</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>

		<!--数据库连接池-->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>druid</artifactId>
			<version>1.1.11</version>
		</dependency>
		<!-- Spring Boot Mybatis 依赖 多了启动不了-->
		<!--      <dependency>-->
		<!--         <groupId>org.mybatis.spring.boot</groupId>-->
		<!--         <artifactId>mybatis-spring-boot-starter</artifactId>-->
		<!--         <version>2.0.0</version>-->
		<!--      </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>org.freemarker</groupId>
			<artifactId>freemarker</artifactId>
			<version>2.3.28</version>
		</dependency>

		<!--swagger-->
		<!--      <dependency>-->
		<!--         <groupId>io.springfox</groupId>-->
		<!--         <artifactId>springfox-swagger2</artifactId>-->
		<!--         <version>2.9.2</version>-->
		<!--      </dependency>-->
		<!--      &lt;!&ndash;swagger-ui&ndash;&gt;-->
		<!--      <dependency>-->
		<!--         <groupId>io.springfox</groupId>-->
		<!--         <artifactId>springfox-swagger-ui</artifactId>-->
		<!--         <version>2.9.2</version>-->
		<!--      </dependency>-->
		<!--      <dependency>-->
		<!--         <groupId>mysql</groupId>-->
		<!--         <artifactId>mysql-connector-java</artifactId>-->
		<!--         <scope>runtime</scope>-->
		<!--      </dependency>-->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.12</version>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-redis</artifactId>
		</dependency>
		<dependency>
			<groupId>com.alibaba.fastjson2</groupId>
			<artifactId>fastjson2</artifactId>
			<version>2.0.7</version>
		</dependency>

		<!--      加密-->
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-core</artifactId>
		</dependency>

		<dependency>
			<groupId>io.jsonwebtoken</groupId>
			<artifactId>jjwt</artifactId>
			<version>0.9.1</version>
		</dependency>

		<dependency>
			<groupId>com.github.xiaoymin</groupId>
			<artifactId>knife4j-openapi2-spring-boot-starter</artifactId>
			<version>4.1.0</version>
		</dependency>


	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>

		</plugins>
	</build>

</project>

连接数据库

创建数据库、导入、选择执行SQL脚本、找到数据库文件地址后执行

yml配置

server:
    port: 8081

spring:
    datasource:
        username: root
        password: 2022
        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

knife4j:
    enable: true
    openapi:
        title: 非法链路自动检测与智能分析
        email: xiaoymin@foxmail.com
        concat: 计应1班
        url: https://docs.xiaominfo.com
        version: v1.0
        license: Apache 2.0
        license-url: https://stackoverflow.com/
        terms-of-service-url: https://stackoverflow.com/
        group:
            test1:
                group-name: 计应1班
                api-rule: package
                api-rule-resources:
                    - com.webgrd.weburl.controller

添加例外路径

MyInterceptorConfig

package com.webgrd.config;

import com.webgrd.interceptor.JwtInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import javax.annotation.Resource;

@Configuration
public class MyInterceptorConfig implements WebMvcConfigurer {
    @Resource
    private JwtInterceptor jwtInterceptor;
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        InterceptorRegistration registration = registry.addInterceptor(jwtInterceptor);
        registration
                .addPathPatterns("/**") //拦截所有
                .excludePathPatterns(
                        "/weburl/user/login",
                        "/weburl/user/info",
//                        "auth/info",
                        "/weburl/user/logout"
                );
    }
}

启动redis

运行项目

登录功能（在postman中登录运行）

1.登录

http://localhost:8081/weburl/user/login

2.获取用户信息

http://localhost:8081/weburl/user/info

前端框架

前端框架是用于简化 Web 应用程序开发的工具集。框架提供了一组通用的功能，如模板系统、路由管理、状态管理、数据绑定等。Web 前端开发人员应该熟悉至少一种主流的前端框架，如React、Vue、Angular等。

React：React 基础、JSX、组件、状态管理、生命周期、React Router、Redux等
Vue：Vue 基础、模板语法、组件、指令、Vue Router、Vuex等
Angular：Angular 基础、组件、指令、服务、路由、状态管理等

浏览器兼容性

不同浏览器有不同的渲染引擎，对于同样的 HTML、CSS 和 JavaScript 代码，可能会在不同的浏览器中呈现不同的效果。Web 前端开发人员应该熟悉不同浏览器之间的兼容性问题，如何编写跨浏览器的代码，如何使用 polyfill 等。

浏览器渲染引擎：Chrome、Firefox、Safari、Edge、IE等
浏览器兼容性问题：CSS 兼容性、JavaScript 兼容性、HTML 兼容性等
兼容性解决方案：polyfill、特性检测、代码优化等

网络安全

网络安全是 Web 前端开发人员需要考虑的重要问题。Web 应用程序容易受到各种攻击，如跨站脚本攻击（XSS）、SQL 注入攻击、跨站点请求伪造攻击（CSRF）等。Web 前端开发人员应该了解这些安全问题，并采取适当的措施来保护 Web 应用程序的安全。

XSS：反射型、存储型、DOM 型 XSS 等
CSRF：攻击原理、预防措施等
SQL 注入：攻击原理、预防措施等
HTTPS：SSL/TLS 协议、证书认证、加密算法等

以上是 Web 前端开发的必备知识，当然还有其他一些知识，如 Git 版本控制、构建工具、测试工具等。学习这些知识需要长期的实践和不断地学习。

Yane~

关注

25
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web开发进阶指南：掌握关键知识点，高质量完成项目

一开始一定要分清前端开发和后端开发，我们来分别介绍一下。Web应用被分类归为分布式应用，一般是客户端——服务器结构，所以我们有一部分的代码运行在客户端，另一部分代码运行在服务器。那些在客户端上的应用就是前端，通常指的就是我们的浏览器。最常用于前端开发的技术是，高级的前端开发人员通常使用这些技术的组合开发应用的前端，另一个前端的常用技术就是使用Photoshop设计，配合其他技术共同完成Web页面的制作。
复制链接

扫一扫