- 博客(33)
- 收藏
- 关注
RSS订阅
原创 Vue+MySQL实现登录注册案例
Vue+MySQL实现登录案例1.新建vue项目并连接数据库具体步骤见vue连接mysql数据库2.新建/views/login.vue根据自己的喜好搭建页面
2022-03-09 10:05:51
23382
131
原创 Vue项目通过node连接MySQL数据库并实现增删改查操作
Vue项目通过node连接MySQL数据库1.创建Vue项目vue create 项目名2.下载安装需要的插件下载expressnpm install express下载cors，用于处理接口跨域问题npm install cors下载mysqlnpm install mysql下载axiosnpm install axios3.在项目中创建server文件夹，用于搭建本地服务器创建/server/app.js，用于配置服务器相关信息let expr
2022-03-01 14:19:36
63920
233
原创 Vue项目安装less和less-loader
less-loader的版本号要搭配webpack的版本号来选择，webpack@4+可以选择的less-loader版本是5~7。完成less的安装后，我们只需要在style节点上加上lang=‘less’，就可以使用less语法了。在vue项目打开终端，进入项目安装（我记得less好像全局安装没用，每个vue项目要单独安装）less目前的最高版本是5+，但保险起见，我们还是安装4+比较好。上一步中，我们已经知道webpack的版本是4+如果没有安装，要先进行安装。打开cmd，通过命令查看。
2022-10-24 15:22:14
23561
6
原创 Nginx配置反向代理解决跨域问题
通过Nginx配置反向代理，解决前端访问接口可能产生的跨域问题Access to XMLHttpRequest at 'http://127.0.0.1/login?username=aaa&password=aaa' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
2022-09-07 14:36:55
11995
原创 通过cookie和localstorage实现数据持久化
最近在写vue项目的时候，把登录的用户信息放在Vuex（store）中，但只要页面一刷新，登录时存入Vuex（store）的数据就被清除了，为解决这一问题，我决定将用户登录信息存入cookie中。使用cookie前，需要安装相应的插件封装方法新建/src/utils/cookie.js (文件夹和文件名可根据自己的习惯命名)实战此实战案例是在vue+mysql实现登录案例的基础上构建的，有需要请自行移步登陆页面输入用户名和密码，登陆成功时，将用户名存入cookie首页效果演示coo
2022-06-17 17:05:03
867
5
原创 脚手架（vue-cli）创建Vue项目超详细过程
Vue创建项目1.创建项目2.项目手动配置3.选择vue版本4.路由模式...Vue项目运行...
2022-03-23 10:33:42
12163
原创 Node.js连接MySQL数据库
Node.js连接MySQL数据库前置条件在本机安装MySQL数据库和Node.js1.下载mysql第三方模块npm install mysql2.导入并配置mysqlconst mysql = require('mysql')const db = mysql.createPool({ host: '127.0.0.1', //数据库IP地址 user: 'root', //数据库登录账号（修改为自己的登录信息） password:
2022-02-28 11:15:03
2452
原创 Node.js接口编写——基于cors解决接口跨域问题
基于cors解决接口跨域问题1.下载cors中间件npm install cors2.导入cors中间件const cors = require('cors')3.配置cors中间件app.use(cors())注意：cors中间件的配置必须在路由配置之前完整案例home.html代码<body> <button class="btn" onclick="get()">get请求</button> <button c
2022-02-28 09:02:35
467
原创 Node.js内置模块——path
path路径模块path模块是由Node.js官方提供的、用来处理路径的模块。它提供了一些列的方法和属性，用于满足用户对路径处理的需求。path的基本使用1.join()path.join()方法用于将多个路径片段拼接成一个完整的路径//使用前需导入模块const path = require('path')//拼接多个路径const p1 = path.join('D:\\Java','\\aaa','./1.txt')console.log(p1);
2022-02-25 09:57:38
541
原创 Node.js内置模块——fs
fs文件系统模块fs模块是由Node.js官方提供的、用来操作文件的模块。它提供了一些列的方法和属性，用来满足用户对文件操作的需求，包括文件目录的创建、删除、查询以及文件内容的读取和写入等。fs的基本操作1.文件内容的读取同步方法readFileSync()readFileSync()可传入两个参数，第一个参数为要读取文件的路径；第二个参数为 options，默认值为 null，其中有 encoding（编码，默认为 null）和 flag（标识位，默认为 r），也可直接传入 encoding。
2022-02-25 09:31:37
792
原创 JS实现眼睛跟随鼠标特效
效果展示 JS使用眼睛跟随特效 代码展示实现原理见代码注释 <div class="face"> <div class="eye"> <div class="white"> <div class="black1"></div>
2022-02-17 14:15:24
1762
原创 JS实现元素消失特效
运行效果展示 JS实现元素碎片化消失特效 设计思路获取要消失元素的位置、宽高和背景生成碎片覆盖要消失的模块，同时将要消失元素的透明度设为0给碎片设置随机大小、透明度和运动方向碎片运动的同时，透明度降低，为0时清除碎片碎片全部消失后，元素被清除代码展示function minbox(i,j,width,height,bg) { var mi
2022-02-16 15:05:17
1852
2
原创 JS特效——下雪
通过JS实现屏幕飘雪 JS实现飘雪特效 //创建雪花元素function snow() { //获取视窗的宽高 var width = window.innerWidth; var height = window.innerHeight; var snow = document.createElement("div"); //创
2022-01-15 09:11:48
2533
原创 Vue生成随机数
通过Math函数生成随机数Math.random()*10 //生成0-10的随机数，包含0，不包含10Math.ceil(Math.random()*10) //ceil向上取整，即生成1-10的随机整数，取0的概率极小Math.floor(Math.random()*10) //floor向下取整，即生成0-9的随机整数Math.round(Math.random()*10) //round四舍五入，即生成0-10的随机整数数，取0和10的概率是其他数的
2022-01-14 09:26:36
19032
原创 炫酷的3D相册
3D相册使用html+css制作一个独属于自己的炫酷相册图片超过六张的可自行修改样式调整角度和大小背景样式未写入，需要可查看背景渐变动画 3D相册 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title<
2022-01-13 09:37:58
252
原创 Vue项目的创建和托管
npm install @vue/cli -g 安装脚手架npm install -g @vue/cli-init 兼容旧版本vue init webpack 项目名 脚手架2创建项目vue create 项目名 脚手架3/4 创建项目vue run serve 运...
2022-01-12 08:14:09
376
原创 数组中的响应式方法
数组中的响应式方法push()：在数组后加入新数据pop()：删除数组最后一位的元素shift()：删除数组第一位的元素unshift()：在数组最前面添加元素splice()：删除/插入/替换reverse(): 数组反转等等…<script>export default { name: 'app', data() { return { fruit: ['苹果','香蕉','菠萝'] } }, methods: { func
2022-01-07 16:45:33
649
原创 vue-router路由
使用vue-router的步骤创建路由组件配置路由映射使用路由：router-link 和 router-view<template> <div id="app"> <router-link to='/home'>首页</router-link> <router-link to='/about'>关于</router-link> <router-view></router-vie
2022-01-07 16:45:05
203
原创 v-model双向绑定
v-mod的基本使用message和input双向绑定，其中一方的值发生变化，另一方的值也跟着发生变化<template> <div id="app"> <h2>{{message}}</h2> <input type="text" v-model="message"> </div></template><script>export default { name: 'app
2022-01-07 16:44:23
337
原创 父子组件的通信和函数调用
父组件向子组件传递数据<template> <div> <!-- 使用子组件并传递数据 --> <children :mes="message" :fruitlist="fruit"></children> </div></template><script>import children from '../components/children/children.vue' /
2022-01-07 16:43:51
323
原创 flex布局（弹性布局）
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。flex： 将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示 flex items默认都是沿着main axis（主轴）从main start 开始往main end 方向排布flex-direction决定了main axis的方向，有4个取值：效果如下 justify-content决定了flex items在main axis 上的对齐方式，共6个取值：效果如下： ali
2022-01-07 08:13:27
25285
原创 v-if和v-show的使用以及他们的区别
v-if<template> <div id="app"> <div v-if="isshow" class="box1">这是一个盒子</div> <button @click="show">显示</button> </div></template><script>export default { name: 'app', data() { retu
2022-01-06 16:59:02
274
原创 v-on监听事件
v-on的基本使用语法糖（缩写） @<template> <div id="app"> <h2>{{num}}</h2> <button v-on:click='num--'>-</button> <button @click="add">+</button> </div></template><script>export defau
2022-01-06 16:58:39
193
原创 computed计算属性
计算属性的基本使用<template> <div id="app"> <h2>{{name}}</h2> </div></template><script>import home from './views/home.vue'export default { name: 'app', data() { return { firstname: '张', las
2022-01-06 16:58:15
454
原创 v-bind动态绑定
v-bind的基本使用语法糖（缩写） ：标签内引用data中的数据，需要加上v-bind<template> <div id="app"> <img v-bind:src="img" alt=""> <a :href="url"></a> </div></template><script>export default { name: 'app', data() {
2022-01-06 16:57:13
382
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人