web初见

感触：学习一个新领域还是得找对方法，先从比较简单的小实例入手，慢慢理解理清逻辑。尽量泛化概念，先搭起一个框架，再去用细节填满这个框架。整体的逻辑框架才是最重要的。

1.新建spring框架web项目

自带运行函数，运行后即可在本地端口的网址中打开（eg8080端口的服务已经开了）

2.编写服务器响应函数

再用@restController加上路径 修饰 Java后端的类和函数，来通过路径URLmap到函数（自动import包）

3.将代码打包上传到服务器发布

properties配置文件中可修改端口。

Maven中可以对代码进行打包，再用scp将打包后的jar发送到云服务器中，在云服务器中运行（可通过参数设置端口）

4.apifox软件测试服务端代码的接口

模拟发送数据参数测试服务端代码

5.服务器端生成随机题目

服务端函数返回字符串

前端：

6.vscode中用vue写前端界面

vue初始化一个前端界面

7.前端页面中添加组件

html定义框架组件（定义变量，调用函数），css让组件变得更好看，js为函数逻辑

8.通过接口从后端获取数据并显示

前端：

在script中安装axios组件

mount函数每次打开页面时调用

axios组件中从后端网址中获取数据包，再解包数据并执行逻辑语句

使用的全局变量存入data(）{}中（最后一项也要加，和；）

JSON数据传递：

9.前端从接口接收json数据

script中定义一些逻辑上的函数

服务端import json类并在xml依赖文件中加上版本信息

json相当于一个结构体，返回多个数据

put将信息加入jsonOBJ中，最后函数返回这个JSON对象

前端script通过axios获取JSON对象

10.服务端接收前端数据并进行逻辑处理

答案放在前端中不安全，所以从前端获取数据（后端函数形参加入requestbody，前端对某个URLpost json包），在后端进行逻辑校验处理

服务端编写好后在apifox中创建接口进行测试

前后端初始化json包的方法有区别哦~

11.前端发送JSON数据到后端接口

var定义结构后，axios将结构格式化成JSON数据，再调用post发送到后端接口

以上是前后端交互的基本逻辑

12.服务器上部署前端后端

后端用maven打包发送到服务器，并在服务器上运行后端（java）

可以先用apifox测试服务器部署后的接口

在本地前端中将axios的调用接口URL改成服务器后端地址，对静态网页进行测试

vscode中将前端进行打包，用scp -r把当前目录所有文件文件夹循环上传到服务器

服务器中使用nginx（类似tomcat，服务器应用程序）进行配置

 启动前端服务之后再启动后台服务

nginx相当于有一个软件一直在后台监听端口，如果有人get就返回index过去

之前都只有一个主页面

13.增加一个页面并跳转

前端路由router(index.js)中可import并指引主页面，分页面（.vue）的路径

处理好路由关系，以及组件页面的关系 

 14.在前后端之间传递参数

URL路径后面可以加参数，通过?分割开始

这个参数可以在html组件中进行设置

1.前端get数据时，调用接口时URL+参数，后端函数可直接通过同名传入参数func（string qid）获取传递过来的参数，进行逻辑控制

2.可通过前端post JSON，将参数存入JSON中，后端解包JSON

一个是前端get后端数据，一个是前端向后端发送JSON，注意区分

通过不同参数，来实现在一个前端页面中发送不同参数，使用后端的不同逻辑来处理

网站功能都在前端后端进行数据传递和处理。可以将问题分解为在前端还是后端做。后端提供接口，前端提供页面。

15.在IDEA中配置数据库

服务器上安装配置mysql 使用ECS手动部署MySQL数据库 (aliyun.com)

创建新账号，再通过datagrip远程连接数据库
修改配置文件yml添加数据库源

16.连接数据库

右侧database工具栏连接数据库

17.配置数据库

根据软件工程需求先设计再实现数据库

easycode插件可自动生成连接数据库的配置文件

加了一些依赖、映射

18.从数据库中获取数据

将表包装成java对象。调用定义的函数接口（service，service.implement（调用dao的函数））后，dao有一个xml映射文件（mapper.xml中）就将映射对应的一条sql语句发送给数据库，使数据库返回数据，并包装成JSON对象返回。

 接下来测试接口，尝试连接服务器数据库，从远程数据库获取信息

总结：datagrip创好表，idea连接配置好远程数据库，再编写函数获取数据库数据 

19.用户登录后端代码

先写好后端代码（写好），定义好前端传来的JSON包，再用apifox测试接口（前后端分离）

后端传回的JSON包包含code和info等提示，

20.用户登录前端代码

根据后端返回的JSON，如果登陆成功则route内push一个新路径名，否则alert

21.用户注册后端代码

先解前端发来的json包，然后处理，最后返回新json包

22.用户注册前端代码

前端能做的就在前端做了