这个评论是从移动端还是PC端来的。 保存token_key到refreshToken里，需要多一个字段。 3、退出登录和过期：之前是做法是干掉所有的refreshToken记录，重新创建新的。不删除，只修改，如果没有就添加。 修改点： 登录 数据库 解析用户流程 退出登录 测试点： 测试登录，测试PC端登录和移动端登录 (pass) 测试权限的使用是否正常（用户解析）(pass) 退出登录，测试PC端退出登录，移动端退出登录 具体的修改请查看视频吧 课程地址：JavaWeb实现个人博客系统

Dodcker创建Mysql容器 我们这里通过docker-compose来创建mysql容器 同学们自行安装好docker和docker-compose ubuntu上安装docker docker-compose安装 创建相关目录 mkdir db mkdir conf mkdir log docker-compose.ytml文件 version: '3.1' services: mysql: container_name: "sob-blog-system-mysql" network_mode: "host" environment: MYSQL_ROOT_PASSWORD: "123456" MYSQL_USER: 'root' MYSQL_PASS: '123456' image: "mysql:5.7.30" restart: always ports: - 3306:3306 volumes: - "/home/aosp/docker/mysql/db:/var/lib/mysql" - "/home/aosp/docker/mysql/conf:/etc/mysql" - "/home/aosp/docker/mysql/log:/var/log/mysql" 自行修改容器名称、mysql的root密码，版本，端口，以及参数文件夹地址。 创建容器 docker-compose up [-d] -d选填，如果有-d则为守护式运行，可以先看看有没有出错，再守护式运行。

download === 'undefined') { tempLink.setAttribute('target', '_blank') } // 挂载a标签 document.body.appendChild(tempLink); tempLink.click(); document.body.removeChild(tempLink); // 释放blob URL地址 window.URL.revokeObjectURL(blobURL); } }, 测试 如果要下载Pdf的话，修改一下路径即可。 比如说： convertRes2Blob(response) { // 将二进制流转为blob let blob = new Blob([response]); if (typeof window.navigator.msSaveBlob !== '

阳光沙滩博客系统的部署 基础环境 我们要有docker的环境，在docker上创建mysql的镜像，redis的镜像，接着构建我们的程序镜像 docker docker的安装，这个同学们可以参考官方的文档 参考文章 ubuntu 完全干净的卸载docker docker-compose安装 Docker安装后修改镜像源 ubuntu上安装docker mysql数据库 Dodcker创建Mysql容器 创建完镜像以后，远程登录一下mysql数据库 一是为了检查是否可以连接成功 二是为了执行sql脚本，创建数据库 脚本同学们请到资料里下载： 资料下载 redis docker搭建redis以及项目配置 Nginx 使用docker创建Nginx服务器容器 部署内容 后台程序 管理中心程序 门户程序 部署后台程序 *要确保已经安装了Java环境 这里面同学借给我们的服务器是2g的内存，所以我们只能省着着了。因此，我们的后台程序，不部署到docker里了，如果要部署到docker上，镜像的创建，请参考后台的课程内容，里面有教如何构建镜像的。 JavaWeb实现个人博客系统-后端 这里面我们直接部署到宿主机上 比如说我们打包出来的程序名称是： sob-blog-system-1.0.0.jar 那么我们的脚本为： nohup java -jar sob-blog-system-1.0.0.jar > sob-blog-system-1.0.0.log 2>&1 & 管理中心的部署 管理中心的部署比较简单，直接构建出来，然后上传到nginx的目录下。 构建命令： vue-cli-service build 低版本的可以 node build/build.js 或者直接点击build按钮 当然啦，build之前，我们得修改一些API，这个具体请看视频。 看到如图，则构建成功！ 这个就是生成的目录 把此文件夹的内容 ，上传到nginx的目录下。 门户的部署 门户的部署，我们需要把所有的文件上传到服务器中。 先创建一个文件夹，然后再传所有的文件上去。 接着编写Dockerfile文件 #1、基于镜像node，版本自己查看上面的链接 FROM node:10.15.3 #2、作者 MAINTAINER sunofbeach.net #3、参数，node的环境为生产环境 ENV NODE_ENV=production #4、任意ip ENV HOST 0.0.0.0 #5、容器内创建目录sob-blog-nuxt RUN mkdir -p /sobBlogNuxt #6、复制当前的内容到容器内容部目录blog COPY . /sobBlogNuxt #7、切换工作目录到blog WORKDIR /sobBlogNuxt #8、暴露端口3000，默认端口 EXPOSE 3000 #9、配置npm的远程仓库 #RUN npm install cnpm -g --registry=https://registry.npm.taobao.org #10、清除缓存 RUN npm cache clean --force #11、安装依赖 RUN npm install --no-package-lock #12、构建，生成dist文件 RUN npm run build #13、start CMD ["npm","start"] 构建镜像 docker build -t sob-blog-nuxt1.0 . 后面有个点，不要漏掉哦，等待构建完成。 构建完成镜像以后，要以使用docker images查看一下。 我们再创建一个Dockerfile version: '3.1' services: nginx: restart: always image: sob-blog-nuxt1.0 container_name: sob-blog-nuxt ports: - 8080:3000 启动镜像：docker-compose up -d

前端侧栏Tab和内容滚动联动切换标题 我们阳光沙滩博客系统课程里有一个关于页面 我们做成这个样子 点击侧栏可以切换右边内容；滚动右侧内容，可以切换左边的内容。 基本UI实现 左侧使用 ElementUI的组件Tabs https://element.eleme.cn/#/zh-CN/component/tabs 同学们可以去这里使用，至于怎么依赖ElementUI，可以参考官方说明，或者学习我们的前端课程。 右侧布局 左边固定，右边加个margin值。 事件处理 事件主要包括两部分：滚动、点击左侧 滚动 滚动的话，我们需要处理侧栏悬浮 添加滚动监听： mounted() { ...... window.addEventListener("scroll", this.onWindowScroll); this.onWindowScroll(); }, 记得删除监听哦 beforeDestroy() { window.removeEventListener('scroll', this.onWindowScroll); }, 这里面就是滑动的代码了 onWindowScroll() { let dy = document.documentElement.scrollTop; let dx = document.documentElement.scrollLeft; let leftBox = document.getElementById('about-left-part'); let parentBox = document.getElementById('about-box'); if (leftBox && parentBox) { let parentBoxTop = parentBox.offsetTop; // console.log(parentBoxTop); if (dy > parentBoxTop) { leftBox.style.top = '0px'; } else { leftBox.style.top = (parentBoxTop - dy) + 'px'; } //处理横向滑动 if (dx > 0) { leftBox.style.left = -dx + "px"; } else { leftBox.style.left = parentBox.offsetLeft + "px"; } } if (!this.isClickLeftSwitch) { //处理标签的滚动范围 for (let i = 0; i < this.contentHeaders.length - 1; i++) { let first = this.contentHeaders[i]; let second = this.contentHeaders[i + 1]; if (dy >= first.offTop && dy < second.offTop) { this.target = first.id; //console.log(this.target); break; } } } else { this.isClickLeftSwitch = false; } 点击事件处理 onLeftItemClick() { this.isClickLeftSwitch = true; this.$router.push({ path: '/about#' + this.target }); // console.log(this.target); } 具体的话请去视频教程吧

RecyclerView显示多种类型 对于这个问题我也好无语呀，这个很简单呀。 纯体力活。 RecyclerView课程地址 Android控件之RecyclerView 相关提问： Recycleview 多种条目类型 如何绑定数据 案例源码地址： https://github.com/TrillGates/RecyclerViewMultiTypeDemo 效果： 解析 网络权限 主布局activity_main.xml 主Activity:MainActivity.kt class MainActivity : AppCompatActivity() { private val contentAdapter by lazy { ContentListAdapter() } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) //初始化数据 initData() //初始化控件 initView() } private fun initView() { contentListView.apply { layoutManager = LinearLayoutManager(this@MainActivity) this.adapter = contentAdapter addItemDecoration(object : RecyclerView.ItemDecoration() { override fun getItemOffsets( outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State ) { outRect.bottom = 2 } }) } } private fun initData() { val dataJson = requestData.resultJson val gson = Gson() val response = gson.fromJson(dataJson, Response::class.java) contentAdapter.addData(response.data) println(response.code) println(response.message) println(response.data.size) } } 适配器ContentListAdapter.kt class ContentListAdapter : RecyclerView.Adapter() { private val data = ArrayList() companion object { const val NONE_IMG: Int = 0 const val ONE_IMG: Int = 1 const val TWO_IMG: Int = 2 const val THREE_IMG: Int = 3 } fun addData(contents: List) { data.clear() data.addAll(contents) notifyDataSetChanged() } class InnerHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { } override fun getItemViewType(position: Int): Int { return when (data[position].covers.size) { 0 -> NONE_IMG 1 -> ONE_IMG 2 -> TWO_IMG else -> THREE_IMG } } override fun onCreateViewHolder( parent: ViewGroup, viewType: Int ): InnerHolder { val itemView: View when (viewType) { NONE_IMG -> { val itemBind = DataBindingUtil.inflate( LayoutInflater.from(parent.context), R.layout.item_no_image, parent, false ) itemView = itemBind.root itemView.tag = itemBind } ONE_IMG -> { val itemBind = DataBindingUtil.inflate( LayoutInflater.from(parent.context), R.layout.item_one_image, parent, false ) itemView = itemBind.root itemView.tag = itemBind } TWO_IMG -> { val itemBind = DataBindingUtil.inflate( LayoutInflater.from(parent.context), R.layout.item_two_image, parent, false ) itemView = itemBind.root itemView.tag = itemBind } else -> { val itemBind = DataBindingUtil.inflate( LayoutInflater.from(parent.context), R.layout.item_three_image, parent, false ) itemView = itemBind.root itemView.tag = itemBind } } return InnerHolder(itemView) } override fun getItemCount(): Int { return data.size } override fun onBindViewHolder(holder: InnerHolder, position: Int) { val dataBinding = holder.itemView.tag val data = data[position] when (dataBinding) { is ItemNoImageBinding -> { dataBinding.item = data } is ItemOneImageBinding -> { dataBinding.item = data } is ItemTwoImageBinding -> { dataBinding.item = data } is ItemThreeImageBinding -> { dataBinding.item = data } } } } 数据bean类 data class ListItem( val title: String, val covers: ArrayList, val viewCount: Int, val commentCount: Int ); 图片加载工具类 class ImageLoadUtils { companion object { @BindingAdapter("imagePath") @JvmStatic fun loadImage(image: ImageView, imageUrl: String?) { if (!TextUtils.isEmpty(imageUrl)) { Glide.with(image.context).load(imageUrl).into(image) } } } } 布局之类的代码请下载吧。 就是这么简单，全部代码请到github上载。 RecyclerViewMultiTypeDemo