胡西风的博客

系列文章目录【vue2.7.16系列】手把手教你搭建后台系统__搭建开发环境（1）【vue2.7.16系列】手把手教你搭建后台系统__引入Element ui（2）【vue2.7.16系列】手把手教你搭建后台系统__配置路由，sass预处理器，axios（3）【vue2.7.16系列】手把手教你搭建后台系统__封装工具库（4）【vue2.7.16系列】手把手教你搭建后台系统__绘制登录页（5）【vue2.7.16系列】手把手教你搭建后台系统__thinkphp6开启多应用（6）【vue2.7

本文分享了前端开发中处理书签管理应用时遇到的数据状态与界面同步问题。作者最初遇到远程数据加载后"失踪"的异常现象，通过逐步排查发现了多个关键问题：React状态更新陷阱导致数据合并失败、undefined字段导致去重逻辑失效、缺少数据同步机制等。解决方案包括使用函数式状态更新、重构去重逻辑、完善数据同步机制，并优化了动画闪烁问题。最终通过合理设计数据标识、明确状态依赖关系、善用React Hooks（useMemo/useCallback）等实现了数据的正确加载与流畅交互。文章总结了宝贵

安装合适版本的依赖在中配置压缩规则，生成.gz文件配置服务器（如 Nginx）支持 Gzip 传输通过这套方案，可显著减小项目静态资源体积，提升页面加载速度。实际应用中需根据项目特点调整压缩阈值和级别，在压缩效果和性能开销之间找到最佳平衡。最后提醒：Gzip 压缩只是前端性能优化的一环，建议结合代码分割、Tree-Shaking、CDN 加速等手段，全面提升项目性能。

打包大小减少 41%初次渲染快 55%, 更新渲染快 133%内存减少 54%…使用 Proxy 代替 defineProperty 实现响应式重写虚拟 DOM 的实现和 Tree-Shaking…官方文档：创建一个项目 | Vue CLI使用 vite 创建官方文档：快速上手 | Vue.jsvite 官网：Vite 中文网创建步骤:初始化模板 - 分析工程结构main.js 看一下跟之前的 vue2 版本有哪些区别的地方App.vue二、常用 Composition API官方

所有精华都在这里，自己去看吧。

与之前的控制器中间增加一层权限控制器。下面需要相应调整，请自行调整。以前的控制器不在直接继承。

请求接口验证token

本系列文章使用[email protected]，安装好node后，npm也就安装好了，npm版本是。到此，我们的项目脚手架就建立起来了。使用nvm管理多个node版本。

项目引入之后，我们在原有的 HelloWorld.vue 页面中加入一个 element 的按钮，测试一下。Element 官网组件教程案例中，包含大量组件使用场景，直接复制组件代码到项目页面即可。

我们把 components 改名为 views，并在 views 目录下添加三个页面，Login.vue，Home.vue，404.vue。打开 router/index.js，添加三个路由，分别对应主页、登录和404页面。三个页面内容简单相似，只有简单的页面标识，如首页页面是 “Home Page”。后，新建router目录及index.js文件。最后在App.vue中加入路由出口。适合vue2的vue-router版本，请看。Home.vue，其他页面类似。

使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会引起越来越多的代码冗余，让代码变得越来越难维护。所以我们在这里先对 axios 进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护。在 src 目录下，新建一个。文件夹，用来管理接口。

删除目录下的Login.vue，新建文件夹，在文件夹下新建,内容如下：其中是全局组件，现在没有，先注释，后续加上。其中是本地存储，现在没有，先不管。然后在文件中引入登录页然后浏览器中登录页面展示如下：当然了，到这里，你的也许会有些不同。你需要现在中删除标签然后还需要引入全局样式文件，在目录下，新建目录，然后新建文件,内容如下：然后在中引入

开启多应用后，默认访问链接会随之发生变化。安装后，创建 adminapi 和 ajpi 两个应用目录文件夹；adminapi作为前端后台接口应用，api作为前端前台接口应用。只要将 controller 移入即可，修改相应的命名空间；记得开启应用路由，在adminapi目录下新建。由于多应用模式属于扩展，我们需要额外安装；也就是需要把应用目录加入到URL中。nginx配置优化掉URL中的。文件，开启应用强制路由。

要想调用其他模型数据，所有的业务都在services层中处理，service层调用dao层，【注意：每个独立的services层只能调用对应的dao层，不能调用其他模型dao层。模型类并不一定要访问数据库，而且在ThinkPHP的架构设计中，只有进行实际的数据库查询操作的时候，才会进行数据库的连接，是真正的惰性连接。不应该过多的介入业务逻辑处理，应只负责相关业务的请求接收，只做最基本的数据接收，并调用相关的sevices业务处理层，返回数据。模型类通常完成实际的业务逻辑和数据封装，并返回和格式无关的数据。

后台管理员表，身份管理表，菜单表。下面是建表SQL，导入到数据库中。目录下的Controller的命名空间。目录用来存放通用的一些东西。在项目根目录下，新建。

每次调接口都要打包（跨域问题，对本地开发不友好），账号密码校验，密码hash，返回管理员信息token，dao层设置的。一般我们数据库中是不允许存储明文密码的，因此我们需要做加密处理。或者可以使用异常处理接管，直接接管验证不通过抛出的错误信息，然后。虽然把登录接口调通了，但是还有许多需要改进的地方。每次去处理数据都要去实例化等等，我们一个一个去优化下。先更改数据库中存储的明文密码。如果没有任何响应，可以设置项目跟目录下的。，已确保前端接收到的错误是。还有一点需要注意的，就是。数据，可以很好处理。

我们使用管理员账号登录后，就进入了管理后台了。替代了，相对的把之前的内容移动到下面新增页面的。'上海市普陀区金沙江路 1518 弄'中调整，登录后跳转到。

依赖注入的类统一由容器进行管理，大多数情况下是在自动绑定并且实例化的。不过你可以随时进行手动绑定类到容器中（通常是在服务类的register方法中进行绑定），支持多种绑定方式。

不造轮子，请看花裤衩封装的。目录，用来存放svg图片，在。中处理svg图片，并注册。

身份管理表，菜单表。下面是建表SQL，导入到数据库中。后面需要动态加载路由及菜单。由此可以发现，管理员有身份，身份有相应权限。因此我们先把重点放到菜单管理列表中。可以看出，到现在终于需要身份管理表登场了。下面连身份表和菜单表一起建好。然后点击菜单【管理员列表】查看信息。接口流程同管理员列表类似，在此不在赘述。

property，你需要为 Vue 实例提供创建好的 store实例。Vuex 提供了一个从根组件向所有子组件，以。有时候我们需要为本地缓存的状态分类，有的是全局的，有的是用户的，有的是某些功能模块的。选项的方式“注入”该 store 的机制：我们可以在。未有详尽之处，后续迭代。目录，用来管理模块状态。文件，用来管理全局状态。为了在 Vue 组件中访问。暴露一些常用值，方便取。

未有详尽之处，后续迭代。中去执行，然后保存用户信息、权限等。

未有详尽之处，后续迭代。

当我们登录页面后，一刷新用户信息就丢失了。因此我们需要将用户信息保存起来，可以保存在。未有详尽之处，后续迭代。其他类似刷新问题都可以用此方法解决。这里我们只需要将之前在。，保存用户信息字符串。

当我们登录后，如果在浏览器中在输入登录地址，不应该展示登录页面，应该直接跳转到登录后的页面。这里我们就要用到路由全局前置守卫了。这样我们在登录后，在进登录页就直接跳转到。未有详尽之处，后续迭代。

中，因为后台布局基本都是这样的，所以我们将其当做组件封装起来。未有详尽之处，后续迭代。

官网传送门安装CLI及搭建项目> npm install -g @angular/cli> ng new my-app 或 ng new my-app --style=scss> cd my-app > ng serve --open网络慢可切换至cnpm > ng set --global packageManager=cnpmangular-c...

问题1：ng build部署后base文件路径问题使用angular-cli搭建的项目，执行ng build后，浏览器打开空白，发现文件的路径不对解决方案：在package.json文件的scripts中添加命令："build":"ng build --base-href ./"–base-href后面替换成打包后的base路径执行：npm run build问题2：Prime...

本博客的一贯宗旨是：坚持一本正经的写博客。React官网应用开发分类介绍原生应用: 介绍： 特别为某个操作系统做的应用, 比如iOS, Android, Blackberry等等。 iOS的开发语言:OC(Objective-C), Swift。Android的开发语言: Java 优点： a.访问手机的所有功能 b.速度比较快, 用户体验好 c.可以投放到

props对象props是只读的 props: 组件自带的的属性, 用于组件内外的值的传递 注: props是只读的, 只能获取, 不能修改 var Hello = React.createClass({ render: function () { return Hello

vue tutorial 入门 vue-cli vuecli

当要 sticky 时，其元素为浮动元素 (position:fixed)，没有占位，例下图，本来浏览器是能显示 9 行，在没有滚动前：浏览器能显示 8+1 行 (包括还没有 sticky 之前这一行的元素)。那么滚动浏览器页面：第一行就会变成 sticky 浮动起来，但是浏览器已经滚动到显示 9 行，原本浏览器就是可以包含 9 行，那么滚动条就会消失，既然这个时候不能滚动了，那就不要 sticky 了，所以滚动时 sticky 就会进入一个变与不变的死循环里。，到显示屏上边框的距离会随着滚动而变化，

vue路由 history模式 nginx配置

插槽（Slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据 name 来填充对应的内容。作用域插槽就是实现在子组件自行决定自己要显示什么内容动态指令参数也可以用在 v-slot 上，来定义动态的插槽名。

/ 这是一个全局前置路由，注意是全局的前置路由// 在每一次切换路由之前，都会触发该函数注意是之前// 它有三个参数，// to==>到哪一个路由，form==>来源哪一个路由，next是否允许前往某一个路由//如果没有执行next页面将会值空白页面console.log("在每一次切换路由之前，都会触发该函数")next()})

JSDoc是一个用于 JavaScript 的API文档生成器，类似于 Javadoc 或 phpDocumentor。可以将文档注释直接添加到源代码中。JSDoc 工具将扫描您的源代码并为您生成一个 HTML 文档网站。

原文地址H5有基于拖拽的事件机制，如果你还不熟悉，请看我之前的文章中有介绍。

都正常，但一执行 时就报错,错误如下：尝试启动提升的命令提示符（即：开始 > 键入 cmd > 右键单击并以管理员身份运行）即可。