前言：
往期Vue框架内容：Vue驾校-从项目学Vue-1
算法系列博客友链：神机百炼
强烈推荐Y总所有课程：小白友好的程序教学社区
项目实战4：
1. 好友列表组件：
1. 调用API添加初始用户：
- API是其他程序员完成某项工作之后，为我们提供函数/url来让我们调用其中的数据/函数
- 本项目中既用到了资源型的APi，又用到了函数型的API，统一都是acwing的Web应用课提供
通过Ajax获取数据：
- 从url中获取资源，既可以使用Ajax，又可以使用Axios
数据来源：
- url : https://app165.acapp.acwing.com.cn/myspace/userlist/
- 我们访问该url时看到的是：
- 但是其实机器访问看到的是json格式的数据：
ajax使用：
- ajax隶属于jquery依赖库下，我们前期未下载，现在到依赖去下载第一个：
- 使用ajax时也是在setup()中使用，传递url并规定好请求类型：
- 导入jquery库
- setup()中通过$.ajax({})发起请求
- sucess(resp)中的resp参数接收数据
- 到对应网页中查看是否请求成功，打印成功：
前端渲染数据：
- 要在子组件中直接使用数据，需要在export default中将数据以变量/对象return
所以我们需要将ajax的success函数中的resp封装到ref/reactive变量中：
- 编写html，将数据渲染到网页中：
- Ctrl+s保存修改后，查看现在的好友列表页面：
- 好友列表页面基本实现，后续在实现其余组件的时候，为好友列表页面添加动态的数据交互
2. 用户动态页面动态url：
- 我们在上篇博客中，实现了单个用户的资料展示，编辑发帖和历史博客功能
- 现在要访问别的用户的动态时，url就不能是统一的http://localhost:8080/userprofile了，需要在后面加上用户的id
- 所以我们要做的第一件事就是去修改router中的网页路由配置‘
1. 为网页路由添加参数：
- 在写前端时，我们通过变量获取数据有两种办法：{{}} 和 v-bind:
- 在router配置路由时，为路由配置参数也是通过冒号:实现的
修改router下的index.js：
- 组件对应路由加上:userId即可：
之后组件的useRoute按位配键，超链接中params中的userId键都统一于此
useRoute()函数获取url中所有参数：
修改导航栏url入口：
查看此时网页效果：
- 到网页中点击导航栏中用户动态，查看url和控制台输出：
- 发现直接对url进行修改，之后useRoute还是可以获取到参数，也还是显示的UserProfileView组件，
说明参数不影响整体网页定位，只影响部分网页数据来源
3. 登录组件：
1.BootStrap解决样式：
- 登录属于form，到表单中查找喜欢的样式：
- 查找居中布局的Css代码：
- 微调登录样式：
- 查看现在的网页：
2.表单提交核验：
- 对于登录表单中的用户名&密码，需要获取到变量中后在父组件中进行检查
组件中创建接收变量：
- setup()中创建，记得setup()中return
v-model接收数据：
- 在对应的input标签中加上v-model=“变量名”，这个属性我们在编辑文章组件中已经使用过了
- 对于错误提示，这个标签是个单项输出的变量，不涉及输入，{{}}取值就完事
表单绑定核验函数：
-
点击登录按钮之后，进行核对，成功后才进入主页
-
button绑定函数步骤很简单，直接一步@click=“函数名”
-
form绑定函数步骤也大差不差，直接一步@submit=“函数名”
为了防止点击登录后马上刷新网页，导致控制台输出无了，我们先使用@submit.prevent="login"拒绝刷新或者跳转网页 -
先写一个简单输出内容的函数进行绑定：
-
查看网页登录效果：正确
3.Vuex全局数据通信：
- 在上一篇中，我们介绍了父子组件之间的函数和数据通信
- 但是如果对于很多组件都要共享的信息，且这些组件之间亲戚关系较远，继续采用父子组件通信会很麻烦
- Vuex插件将维护一个所有组件都共享内容的全局变量，所有组件可以通过直接存取其中数据来化简通信步骤
store文件含义：
- 在第一篇的main.js中，我们也见过这个文件，但是未详细介绍：
createApp(App).use(store).use(router).mount('#app')
-
打开这个文件之后，发现只有五部分：
-
使用举例：
导入外部对象分为三步：export default + import + key
-
mutations的同步修改含义：
同步修改可以理解为，当mutations中函数要对一个对象的属性进行修改时，该对象的属性可以直接获取到，而不需要经过从网络的url或者网页资源中获取
所以一般不需要同步的过程和操作写在actions中，当actions想修改值时，再调用mutations中的同步修改函数
-
具体使用步骤会在下面的项目中写
4.两种登录状态维护方式：
session数据库：
- 将用户名 + 密码 + 生成的session_id存储到服务器数据库中
待到退出账户或者登录过期后从数据库中删除这条数据
- 用到了服务器数据库的存储功能
json_web_token(JWT)加密校验：
- 加密就是字符串哈希，不同字符串对应哈希值不一样，
且从字符串到哈希值1s，目前人类算力有生之年可能可以实现从哈希值到字符串 - 由于输入可能有不常见字符，如🗡，所以一般先用base64编码重写一下编码，可以用常见字符表达不常见字符
- JWT加密校验过程：
私钥为服务器个人保留，JWT为客户端登录信息，公钥为私钥+JWT所求哈希值
- JWT算法中服务器只需要保留私钥即可，对于每次请求，利用私钥+JWT检查公钥是否正确即可，且y总已经提供JWT算法APi：获取JWT&刷新JWT
跨域问题：
- 在一个域名如localhost:8080下调用另一域名如acwing中的API，称为跨域问题
- Session机制对跨域问题解决比较麻烦，所以本项目采用的是JWT机制
博客架构：
- 目前登录页面还差JWT机制的添加，所有页面只有注册 和 注销 未实现了（主页自己发挥），但是关注功能和浏览他人博客功能为实现
- 当实现了所有页面之后，我们提供后端django接口和vue前端对接，做成一个真正的项目并上线
- 明天先处理调用带有跨域问题的JWT机制API