- 博客(44)
- 收藏
- 关注
RSS订阅
原创 个人建站前端篇（五）插件unplugin-vue-components的使用
unplugin-vue-components 插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）使用此插件后，不需要手动编写 import { Button } from 'ant-design-vue’这样的代码了，插件会自动识别 template中使用的自定义组件并自动注册。当你使用unplugin-vue-components来引入ui库的时候，message, notification 等引入样式不生效。
2024-02-20 17:39:03
1374
原创 个人建站前端篇（六）插件unplugin-auto-import的使用
vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦，可以通过unplugin-auto-import给我们自动引入解决了vue3-hook、vue-router、useVue等多个插件的自动导入，也支持自定义插件的自动导入，是一个功能强大的typescript支持工具。
2024-02-20 17:26:57
865
原创 个人建站前端篇（二）项目采用服务端渲染SSR
最后将项目部署到生产环境上，执行npm run build打包，然后将dist文件夹下的内容复制到服务器上，启动server.js启动服务，访问项目，查看效果。进行代码改造，在 src 目录下新建entry-client.ts和entry-server.ts两个入口文件。修改main.ts文件，将Vue应用的入口文件改为entry-server.ts。其中entry-client.ts文件内容如下。最后在项目根目录新建启动文件server.js。entry-server.ts文件内容如下。
2024-01-31 16:21:41
1420
原创 个人建站前端篇（一）项目准备初始化以及远程仓库连接
Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。新建dev分支，提交代码到gitee仓库，执行以下命令，提交代码到gitee仓库，并推送到远程仓库。这里项目根目录会生成directory.md文件，里面会列出项目的目录结构，方便我们查看项目结构。打开git bash，进入webSiteVue文件夹，执行以下命令。在gitee上创建一个新的仓库，命名为website。
2024-01-30 13:27:04
415
原创 云风网（www.niech.cn）个人网站搭建（九）html静态菜单列表替换为接口请求动态数据
至此，网站的初步部署已经完成, 云风网 正常访问。接下来采用 vue3.0 完成前端部分的改造，以及后续接口分页等功能的完善，未完待续！之前部署的网站 html 内容都是静态写死的，现在需要替换为接口获取数据展示。这些重复的代码结构简化为动态数据循环渲染。
2024-01-22 18:01:43
554
原创 云风网（www.niech.cn）个人网站搭建（八）服务器部署接口测试请求
将之前测试的 html 文件中http://127.0.0.1:8090/地址改成云服务器外网地址，同时需要安全组需要开放 8090 端口接下来根据步骤进行测试。
2024-01-22 17:58:25
385
原创 云风网（www.niech.cn）个人网站搭建（七）navicat 连接远程mongodb数据库
1、防火墙打开27017端口2、配置mongodb的配置文件修改mongodb配置文件。
2024-01-22 17:53:14
330
原创 云风网（www.niech.cn）个人网站搭建（六）node项目部署到服务器
二、网站 node 项目，新建 node 项目，配置对应的参数。一、服务器创建新目录 api，用于放置 node 项目文件。依旧采用宝塔面板部署。三、服务状态改为启动。
2024-01-22 17:48:06
534
原创 云风网（www.niech.cn）个人网站搭建（五）node本地项目接口开发
node 服务器进行模块化构建新建一个命名为 api 的文件夹作为服务器根目录安装依赖npm installpackage.json 配置下面是各个模块的功能。
2024-01-22 17:46:12
901
原创 云风网（www.niech.cn）个人网站搭建（四）navicat 连接mongodb数据库
第一步，启动MongoDB服务具体操作请移步：MongoDB安装配置教程第二步：创建新连接，创建数据库文件–新建连接–MongoDB双击打开连接（也可右键打开连接），右键新建数据库，命名创建新集合在集合处右键，新建集合mongodb的增删改查。
2024-01-22 17:38:34
368
原创 云风网（www.niech.cn）个人网站搭建（三）mongodb本地安装
1.创建数据库文件的存放位置在data文件夹下创建 db 文件夹（启动 MongoDB 服务之前需要必须创建数据库文件的存放文件夹，否则命令不会自动创建，而且不能启动成功）2.启动 MongoDB 服务（Win+R键），输入cmd3.进入命令编辑模式，找到db文件，按如下方式输入4.输入命令，来启动MongoDB 服务（高版本 mongosh）5.按Enter键之后显示，一般端口是270176.浏览器中输入地址和端口号为：7.显示结果如下，就说明安装成功并结束。
2024-01-22 17:33:24
1156
原创 云风网（www.niech.cn）个人网站搭建（二）服务器域名配置
这里直接采用宝塔服务器运维管理面板来进行配置，简单无脑Linux面板8.0.5安装脚本这里具体看服务器的配置，直接根目录命令安装就行了安装完成就可以看到面板访问地址了（也可以明细 bt default 查看）如果忘记密码，可以直接 bt 命令进行修改这里根据面板地址进行登录访问即可，下面可以进行配置了。
2024-01-22 17:16:53
565
原创 云风网（www.niech.cn）个人网站搭建（一）基础准备
这里就以阿里云平台为例，个人开发建议ECS云服务器，这个新用户有活动。一般几十块一年、基础配置个人开发够用了。前端部分目前打算先做一版原生 js 实现的、后续再改版为 vue/react 版本的。作为一名前端开发，这里就以 node 切入去开发接口，能够效率的解决接口数据问题。域名同样购买后进行备案申请，按照平台流程顺利操作就行了。一切准备好之后，就可以正式开发了。
2024-01-22 17:08:54
373
原创 调用微信扫一扫功能
原因：微信开发文档并没有说清楚，其实在微信后台可能是维护了2个接口， 或者是对设备类型进行了区别，总之在回调函数中返回的结果封装对象并不是同一个， 所以这要求我们也进行相应的处理， 不然就会出现上面这种默认奇妙的问题。需要注意的是 debug 调试的时候，设置为 true ，会自动弹出配置成功或失败信息，调试时可以借助它。$router.push 的跳转影响了我的 url ，在 IOS 上的 push 跳转不能写入浏览器的地址栏，但是安卓可以，导致安卓和 ios 跳转之后的地址不同，所以 ios 失败了。
2023-12-26 13:23:56
1165
原创 HTML5+NodeJs实现WebSocket实现循环推送
HTML5+NodeJs实现WebSocket实现循环推送最近在做图表展示方面需要实现循环推送效果，那么webSocket无疑是比较好的选择了，WebSocket相较于HTTP来说，有很多的优点，主要表现在WebSocket只建立一个TCP连接，可以主动推送数据到客户端，而且还有更轻量级的协议头，减少数据传送量。所以WebSocket暂时来说是循环推送的最佳协议了。至于服务器语言选择nodeJ...
2019-12-30 18:47:05
1549
原创 react项目解决浏览器窗口变化重新加载的问题
useEffect, useState, useCallback解决浏览器窗口变化加载问题初步接触react项目遇到很多问题，这里记录分享一下问题以及解决方法。f12，切换移动端浏览模式，浏览器窗口变小，项目样式就乱了需要手动刷新重新加载之后恢复正常.为了解决这一问题，看了下文档，自己琢磨找到了解决办法。1、首先全局layouts/index.jsx引入useEffect, useS...
2019-12-17 11:33:44
2159
1
原创 解决justify-content:space-between 2个元素两端分布的问题
在display:flex布局的情况下，justify-content:space-between。当一行可以容纳三个元素，并且一行只有两个元素的情况，这两个元素会进行两端排列。
2024-03-21 17:23:47
295
原创 个人建站前端篇（七）vite + vue3企业级项目模板
D 表示安装模块到开发依赖管理devDependencies中，如果你安装的库是用来打包的、解析代码的，比如vite、webpack、babel，就可以用 -d 来安装，项目上线了，这些库就没用了。vite-plugin-eslint: vite的一个插件，让项目可以方便的得到eslint支持，完成eslint配置后，可以快速的将其集成进vite中，便于在代码不符合eslint规范的第一时间看到提示。assets文件夹新建icons文件夹，新建svg文件夹，新建svg文件夹下新建svg文件，文件名随意。
2024-02-27 11:29:32
1402
原创 vuepress搭建个人博客以及部署
vuepress，Vue 驱动的静态网站生成器，以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。vuepress存在很多主题，也可以自定义设计主题，上传npm使用这里采用vuepress-theme-hope主题模板进行制作创建项目命令yarn/npm/pnpm都可以这里记录几个关键点。
2024-01-27 10:32:35
1264
原创 云风网（www.niech.cn）个人网站搭建（补充）HTTP常见状态码
400 Invalid Request：[POST/PUT/PATCH]用户发出的请求有误，服务器没有进行新建或修改数据的操作。服务器必须在响应中包含有关冲突的信息。406 Not Acceptable：[GET]用户请求的格式无法获取，比如请求JSON，但是只有XML。403 Forbidden：与401错误相对，表示用户得到授权，但是访问是被禁止的（用户已存在）200 OK：[GET]服务器成功返回用户请求的数据，请求成功。404 NOT FOUND：用户发出的请求针对的是不存在的记录。
2024-01-22 18:06:13
335
原创 云风网（www.niech.cn）个人网站搭建（补充）禁止鼠标以及键盘的一些操作
禁止打开控制台，防止别人进行代码调试，当然这也只是简单的限制，也有破解的方法。这个看个人需求进行添加。
2024-01-22 18:04:53
320
原创 H5页面在移动端点击输入框页面会放大
html未标识移动端元信息是否进行缩放处理,可选值为yes和no。一般情况下,不需要对页面进行缩放处理,因此取值为no。如果在vue项目中，一般是在 public 文件夹下的 index.html 当中添加。直接在html中添加。
2023-12-26 11:18:57
653
原创 vue3中watch()的使用方法
当使用 getter 函数作为源时，回调只在此函数的返回值变化时才会触发。在深层级模式时，如果回调函数由于深层级的变更而被触发，那么新值和旧值将是同一个对象。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。flush：调整回调函数的刷新时机。当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。
2023-11-13 16:18:07
337
原创 Vue3+element-plus el-from中el-select选中后无法回显
其中问题是el-from的ref和model命名packageForm一样，在vue2可以使用，vue3中会出问题，只需要区分命名就可以解决问题。
2023-11-10 12:02:05
1347
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人