CaRuJan-CSDN博客

原创仿京东项目笔记1

项目代码1关闭eslint校验工具vue.config.jssrc文件夹简写方法，配置别名因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些在文件根目录下，跟vue.config.js同级目录下，新建jsconfig.json文件，[@代表的是src文件夹]创建的vue2项目，默认是有jsconfig.js文件，文件配置选项说明，可参考这个blog路由分析 Vue-Router前端路由:K即为URL（网络资源定位符

2023-09-03 18:45:05 539

原创仿京东项目笔记2（注册登录）

api/index.jsstore/user.js1.2 Vue开发中Element UI的样式穿透1.2.1 ::v-deep的使用参考::v-deep的使用在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）1、当项目中使用的 css 原生样式，需要使用 >

2023-09-03 18:44:37 1322 2

转载前端跨域解决方案

大概的流程就是：我们在客户端请求自己的node代理服务器，然后在node代理服务器中转发客户端的请求访问服务器，服务器处理请求后给代理服务器响应数据，然后在代理服务器中把服务器响应的数据再返回给客户端。实现思路：客户端请求nginx服务器，在nginx.conf配置文件中配置server监听客户端的请求，然后把location匹配的路径代理到真实的服务器，服务器处理请求后返回数据，nginx再把数据给客户端返回。它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。

2023-07-11 16:22:02 324

原创 Vue全家桶（五）：Vue3快速上手

打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking…Composition API（组合API）新的内置组件其他改变官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create3.2 使用 vite 创建官方文档：https://v3.cn.vuejs.org/guide/installation.ht

2023-06-21 10:16:25 3705

原创 Vue全家桶（四）：Vue Router 路由

Vue的一个插件库，专门用来实现SPA应用

2023-06-18 21:05:58 820

原创 Vue全家桶（三）：Vuex状态管理（State、Getters、Mutations、Actions）

专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件，对 Vue 应用中多个组件的共享状态进行集中式的管理 (读/写)，也是一种组件间信的方式，且适用于任意组件间通信。Vuex Github: https://github.com/vuejs/vuex处理大量的需要在组件间传递的数据，直接定义一个全局的data属性保存就行了。如果我们的页面比

2023-06-17 10:47:29 2508

原创 Vue全家桶（一）：Vue基础+Vue-Cli+Vue组件化+过渡动画

Vue是一套用于构建用户界面的渐进式框架。渐进式就跟这个图片一样，开发可以根据需求，逐渐递增所要的方式，但每个方式有不是依靠行特别强Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。库是一个模块，而Vue是一套架构，会基于自身特点向用户提供一套相当完整的解决方案，而且控制权在框架本身；对项目的侵入性较大，使用者要按照框架所规定的某种特定规范进行开发，项目如果需要更换框架，则需要重新架构整个项目。响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom操作，而专心

2023-06-16 15:30:04 4201 1

原创 Vue全家桶（二）：Vue中的axios异步通信

从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API [JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF（跨站请求伪造）使用axios需要下载库联系阅读：前端跨域（待更新）

2023-06-16 13:14:35 1559

原创 09Vue3-Vuex的Moduls模块划分和文件拆分

Module由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：...

2021-05-26 18:17:37 777

原创 08Vue3-Vuex的Action异步处理

actions异步处理Home.vue<template> <div class="home"> <h2>使用全局的状态管理</h2> <h3>Num:{{$store.state.num}}</h3> //Actions异步处理 <button @click="cnum">Action</button> <h3>state中的平方{{vuex

2021-05-18 01:14:51 1560

原创 07Vue3-Vuex中计算数学getters应用

gettersHome.vue<template> <div class="home"> <h2>这是在单页模板中应用</h2> <h3>count:{{count}}</h3> <h3>计算属性：{{mypow}}</h3> <button @click="count--">-</button> <button @click="cou

2021-05-18 00:21:50 746 1

原创 06Vue3-Vuex的状态管理

Vuex的状态管理Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。就是一个加强版的data！在单页应用中会有一个data函数，管理当前应用的状态。处理大量的需要在组件间传递的数据，直接定义一个全局的data属性保存就行了。如果我们的页面比较简单，切记千万不要没事找事引入Vuex，我们使用Vuex是因为项目变得复杂之后，有很多数据需要在父组件、子组件和孙组件之间传递，处理起来很繁琐，于是就需要Vuex这样一个可以对这一部分数据进行统一管理的东西，也是响应式什么情况需要使用Vuex管

2021-05-17 22:13:22 299 2

原创 06Vue3-Vue路由笔记

路由基本用法文件目录结构route->index.js配置文件解读import { createRouter, createWebHistory } from 'vue-router'//引入组件import Home from '../views/Home.vue'import User from '../views/User.vue'//等价于//const Home = () => import('../views/Home.vue')//const About = (

2021-05-15 01:51:11 648 3

原创 echarts3.x，echarts5.x 的wordCloud兼容

echarts5.x 使用echarts-wordcloud2版本，参考官方Github https://github.com/ecomfe/echarts-wordcloud且要注意写法，textStyle 设置随机色时，不用加normal，否则会出不了颜色var chart = echarts.init(document.getElementById('main'));chart.setOption({ ... series: [{ type: 'wordClou

2021-04-21 00:34:47 2175

转载 python字符串组成MySql 命令时，插入数据报错

python向mysql数据库插入数据时经常会碰到一些特殊字符，如单引号，双引号。原代码sql2 = "select ds, country, per_hundred from covid_vaccination_doses_per where country = '{}'".format(i[0])报错pymysql.err.ProgrammingError: (1064, “You have an error in your SQL syntax; check the manual that

2021-04-11 10:46:13 510 1

原创 05Vue3-Vue中使用axios异步通信

Vue使用axios向服务器请求数据<template> <div class="footer"> <ul> <li v-for="(item,index) in links" :key="index"> <a href="item.url">{{item.name}}</a> </li> </ul> </div></templ

2021-04-10 11:21:11 1108

原创 04Vue3-组件化开发

组件基础组件基本实例App.vue<template> <div> <span style="color: blueviolet">App.Vue</span> </div> <HelloWorld></HelloWorld></template><script>import HW from './components/newHelloWorld'export de

2021-04-09 16:47:08 250

原创 03Vue3-模板语法

文章目录模板语法1. 插值操作2. 计算属性3. 事件监听4. 条件渲染5. 列表渲染6. v-model模板语法应用——简易购物车模板语法1. 插值操作插值：{{}}双大括号里支持表达式，如：{{ number + 1 }} {{ ok ? ‘YES’ : ‘NO’ }} {{message.split(’’).reverse().join(’’)}}指令：v-（在{{}}和v-指令进行数据绑定时，支持js单个表达式）<p v-once>{{msg}}<

2021-04-08 11:28:22 597

转载模式详解: MVVM、MVC、MVP

MVVMm:model 数据层v:view 视图层vm: 数据双向绑定MVVM(Model-View-ViewModel)是一种软件架构设计模式，它是MVC的增强版，实质上和MVC没有本质区别，MVVM是以“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，而是通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图数据的变化会同时修改数据源，而且数据源数据的变化也会立即反应到View上。三者关系MVVM的优点：低耦

2021-04-06 15:52:01 271

原创 02Vue3-Vue-cli(Vue脚手架)

Vue-CLI (Command Line Interface)Vue-CLI 是Vue官方提供的脚手架工具默认已经帮我们搭建好了一套利用Webpack管理vue的项目结构命令安装：npm install -g @vue/cli检查版本：vue --version创建项目：vue create 项目名称选择Vue3，默认安装插件目录结构文件名说明dist存放使用npm run build打包的项目文件node_modules存放项目的依赖包public

2021-04-06 12:11:06 455

原创 01Vue3-认识Vue

认识VueVue是一套用于构建用户界面的渐进式框架。渐进式就跟这个图片一样，开发可以根据需求，逐渐递增所要的方式，但每个方式有不是依靠行特别强Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。库是一个模块，而Vue是一套架构，会基于自身特点向用户提供一套相当完整的解决方案，而且控制权在框架本身；对项目的侵入性较大，使用者要按照框架所规定的某种特定规范进行开发，项目如果需要更换框架，则需要重新架构整个项目。Vue的两核心响应式的数据绑定：当数据发生改变，视图可以自动更新

2021-04-05 20:56:42 189

原创 Axios笔记

环境配置安装好npm+webpack+axiosnpm init --ynpm i webpack webpack-cli -Dnpm i axios -S-S 生产环境-D 开发环境axios基本用法请求方法的别名axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(url[, config])axi..

2021-04-05 16:49:21 115

原创 ES6笔记-Promise对象（入门-同步异步-Promise基本使用-链式调用-事件循环-面试案例）

Promise对象主要用于异步计算可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果可以在对象之间传递和操作promise，帮助我们处理队列异步回调的问题：之前处理异步是通过纯粹的回调函数的形式进行处理很容易进入到回调地狱中，剥夺了函数return的能力问题可以解决，但是难以读懂，维护困难稍有不慎就会踏入回调地狱 - 嵌套层次深，不好维护promisepromise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）并未剥夺函数return的能力，因此

2021-04-05 14:20:28 810

转载 ES6笔记

一、let和const为什么新增let声明变量的关键字a. var可以重复声明b. var无法限制修改c. var没有块级作用域块级作用域：{}、if() {}、 for() {}只有在function(){} 中有作用域let块级作用域var name = "edu" if (true) { var name = "hei"; console.log(name); //输出hei } console.log(name)

2021-04-04 16:40:32 112

原创 13-webpack去除项目里的死代码

去除没有用到的JS代码Webpack通过tree-shaking去掉了实际上并没有使用的js代码来减少包的大小。必须使用es6模块化， 2. 开启production环境去除没有用到的CSS比如我们经常使用的BootStrap(140KB)就可以减少到只有35KB大小webpack使用purgecss-webpack-plugin去除无用的cssconst PurgecssPlugin = require('purgecss-webpack-plugin');const glob = re

2021-04-02 11:12:08 568

原创 13-webpack环境优化

HMR（模块热替换）模块热替换(Hot Module Replacement 即 HMR)是 webpack 提供的最有用的功能之一, 它允许在运行时更新各种模块, 而无需进行完全刷新。启用这个功能，只需要修改一下 webpack.config.js 的配置, 使用 webpack 内置的 HMR 插件就可以了，在devServer中使用hot参数（只能监测到js的热替换，html不可以）devServer: { contentBase: resolve(__dirname, "buil

2021-04-02 01:45:31 54

原创 12-webpack开发服务器devServer配置

devServer给我们提供了开发过程中的服务器，是一个使用了express的Http服务器，它的作用主要是为了监听资源文件的改变，该http服务器和client使用了websocket通信协议，只要资源文件发生改变，webpack-dev-server就会实时的进行编译打包，有利于提升开发效率，且只会在内存中编译，不会有任何输出。下载webpack-dev-server包npm i webpack-dev-server -Dwebpack-dev-server并不能读取你的webpack.con

2021-04-02 00:56:53 296

花卉识别器程序+10种花卉训练集测试集

学生成绩信息管理系统.rar

空空如也