- 博客(37)
- 收藏
- 关注
RSS订阅原创 vue-element-admin（一）mock
一、在vue.config.js中before: require(’./mock/mock-server.js’),后加上//解决跨域问题proxy: { [process.env.VUE_APP_BASE_API]: { // dev-api target: 'mock中自己创建的base url', changeOrigin: true, //开启代理服务器， /dev-api/test pathRewrite: { [ '^' + process.env.V
2021-09-13 03:21:43
860
原创 nodejs写后端接口
一、目录├─ server│ ├─ app.js│ ├─ controller│ │ ├─ account.js│ ├─ DBhelper│ │ └─ mysql.js│ ├─ package-lock.json│ ├─ package.json│ └─ routers│ ├─ account.js二、封装接口mysql.jsconst mysql = require('mysql');//创建连接池对象const pool = mysql.creat
2021-09-08 08:17:28
2454
1
原创 nodejs连接mysql数据库
一、项目初始化npm init -y二、安装mysql模块npm install mysql --save-dev简写：npm i mysql -D三、直接连接const mysql = require('mysql');const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '', port: '3306', database: ''
2021-09-03 00:20:51
472
原创 vue-cli
一、概念vue-cli（vue脚手架）是vue官方提供的、快速生成vue工程化项目的工具。特点：① 开箱即用② 基于webpack③ 功能丰富且易于扩展④ 支持创建vue2和vue3项目安装：npm install -g @vue/cli或yarn global add @vue/cli检查安装：vue --version1、使用cmd2、使用powershell默认使用vue --version命令出现错误vue : 无法加载文件 C:\Users\Adminis
2021-08-27 03:34:36
300
原创 vue路由(三)关于vue-router高级用法
一、路由重定向指的是：用户在访问A的时候，强制用户跳转到地址C，从而展示特定的组件页面。通过路由规则redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向。例如：在路由实例创建中访问/，重定向为home{ path: '/' redirect: '/home' }二、路由高亮通过两种方式，将激活的路由链接进行高亮显示：① 使用默认的高亮class类被激活的路由链接，默认会应用一个叫做router-link-active的类名。开发者可以使用此类名选择器，为激活路由链接设
2021-08-26 04:45:11
312
原创 vue路由(二)关于vue-router基本使用
一、什么是vue-routervue-router是vue官方给出的路由解决方案。它只能结合vue项目使用，能轻松管理SPA项目中的组件切换。二、vue-router基本使用步骤①安装vue-routernpm install vue-router@next -S②定义路由组件③声明路由链接和占位符使用<router-link>标签来声明路由链接，并使用<router-view>标签来声明路由占位符。<router-link to="/home">首页&l
2021-08-25 21:11:42
147
原创 vue路由(一)介绍与实现简单的模拟路由
一、什么是路由路由就是对应关系。分为两大类：① 后端路由请求方式、请求地址与function处理函数之间的对应关系。② 前端路由Hash地址与组件之间的对应关系。工作方式：①用户点击了页面上的路由链接②导致了URL地址栏中的Hash值的变化③前端路由监听了到Hash地址的变化④前端路由把当前Hash地址对应的组件渲染到浏览器中二、SPA与前端路由的关系在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成！三、模拟实现简单的路由<template> &l
2021-08-25 17:28:59
360
原创 vue之table案例
实现步骤：① 搭建项目的基本结构② 请求商品列表的数据main.js中全局配置axiosimport axios from "axios";const app = createApp(App)axios.defaults.baseURL = 'https://www.escook.cn'app.config.globalProperties.$http = axiosapp组件<script>export default { name: 'App', dat..
2021-08-25 02:51:18
1211
原创 vue自定义指令
一、自定义指令vue自定义指令分为两类，分别是：私有自定义指令(在组件中声明)全局自定义指令(在mian.js中声明)二、声明自定义指令通过directives节点下声明私有自定义指令①：创建私有自定义指令<input type="text" v-focus> directives: { //为自定义指令取名字 focus: { //绑定元素插入DOM时，自动触发mounted函数 mounted(el) { el.fo
2021-08-24 15:54:45
452
1
原创 vue插槽
一、什么时插槽插槽<slot>时vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。二、插槽用法1、基本使用app组件： <my-count><!-- 声明要放的文本--> <p>App组件声明</p> </my-count>mycount组件<p>这是第一个P标签</p><slot></sl
2021-08-24 03:33:03
332
原创 vue动态组件
一、概念动态组件指的是动态切换组建的显示与隐藏。vue提供了一个内置的<component>组件，专门用来实现组件的动态渲染。①<component>是组建的占位符②通过is属性动态指定要渲染的组件名称③<component is=“要渲染的组件名称”></component>二、使用1、点击按钮实现切换显示的组件<template> <div> <h1 ref="myh1">app组件</h
2021-08-24 01:54:29
179
原创 vue的ref引用
一、什么是ref引用ref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用。二、ref基本使用（ref方法是异步执行的）给标签ref取名：<h1 ref="myh1">app组件</h1> methods: { getRefs() { console.log(this.$refs) } }使用ref改变h1标签颜色 methods: { getRefs() { this.$refs.
2021-08-24 01:31:46
260
原创 vue全局配置axios
一、配置全局axios在mian.js入口文件中，通过app.config.globalProperties全局挂载axios。二、例子在main.js中：import axios from "axios";const app = createApp(App)//请求根路径axios.defaults.baseURL = 'url'//全局挂载在app上app.config.globalProperties.$http = axiosapp.mount('#app')在post组
2021-08-22 17:21:45
1327
原创 vue组件之间的数据共享
一、父子组件的数据共享①父 -> 子共享数据父组件通过v-bind属性绑定向子组件共享数据。同时，子组件需要使用props接受数据。父组件：<my-watch :msg="message" :user="userinfo"></my-watch> data() { return { message: '父传子v-bind，子接受props', userinfo:{name:'父v-bind',age:'子props'} }
2021-08-21 17:27:31
408
原创 vue组件的生命周期
一、组件运行过程组件的生命周期指的是：组件从创建->运行（渲染）->销毁的整个过程，强调的是一个时间段。二、组件的不同时刻vue内置了不同时刻的生命周期函数，生命周期函数会伴随着组件运行而自调用。最主要的生命周期函数：①当组件在内存中被创建完毕后，自动调用created函数②当组件被成功渲染到页面后，自动调用mounted函数③当组件被销毁完毕后，自动调用unmounted函数<script>export default { name: "LifeCycle",
2021-08-21 02:17:08
324
原创 watch侦听器
一、概念watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名变化发起请求，判断是否可用。二、用法<input type="text" class="form-control" v-model.trim="username"> data() { return { username: "" } }, watch: { username(newVal,oldVal) { console.log(n
2021-08-21 01:39:03
225
原创 vue基于bootstrap的todolist
一、main.js引入bootstrap。import { createApp } from 'vue'import App from './App.vue'import './assets/css/bootstrap.css'import './index.css'createApp(App).mount('#app')二、TodoList.vue组件<template> <ul class="list-group"><!-- 列表框--...
2021-08-20 18:59:06
384
原创 vue子传父与父传子
父传子①父组件通过v-bind:属性绑定的形式，把数据传递给子组件<my-counter :number="count"></my-counter>②子组件中，通过props接受父组件传递过来的数据<p>count值时：{{number}}</p>export default { name: 'MyCounter', props: ['number']}子传父①在v-bind：指令之前添加v-model指令<my-counte
2021-08-19 20:31:47
195
原创 vue自定义事件
一、概念为了让组件的使用者可以监听到组件内状态的变化，就要用到组件的自定义事件。组件的使用者通过v-on监听自定义事件。二、步骤在封装组件时：①声明自定义事件②触发自定义事件在使用组件时：①监听自定义事件三、声明自定义事件①自定义组件封装的自定义事件，必须事先在emits节点中声明：export default { emits:['change']}②触发自定义事件在emits节点下声明的自定义事件，可以通过this.$emit(‘自定义事件的名称’)方法进行触发： me
2021-08-19 20:06:37
130
原创 vue计算属性
一、概念计算属性本质上就是一个function函数，可以实时监听data中的数据的变化，并return一个计算后的新值，供组件渲染DOM时使用。（计算属性会缓存计算的结果，只有计算属性依赖项发生变化时，才会重新进行运算，所有性能好） <div> <input type="text" v-model.number="count"> <p>{{count}}乘以2的值为：{{plus}}</p> </div> com
2021-08-19 19:27:36
96
原创 动态绑定HTML的class
一、三元表达式，动态的为元素绑定class的类名<h3 class="thin" :class="isItalic ? 'italic' : ''">style组件</h3><button @click="isItalic = !isItalic">切换文字倾斜</button> data() { return { //文字是否倾斜 isItalic: false, } }<style lang=
2021-08-19 17:26:36
2186
原创 组件的props
一、props概念为提高组件的复用性，组件封装原则：①组件的DOM结构、Style样式要尽量复用②组件中要展示的数据，尽量由组件的使用者提高为了方便使用者为组件提供要展示的数据，vue组件提供props。props组件的使用者可以通过props把数据传递到子组件内部，供子组件内部使用：例子：通过自定义props，把文章的标题和作者，传递到my-article组件中。<my-article title="奥特曼的街区" author="欧皇"></my-article>
2021-08-19 15:57:43
431
原创 vue解决样式冲突与样式穿透
解决样式冲突解决方法：为每个组件分配唯一的自定义属性，通过属性选择器来控制样式的作用域。在vue中style节点提供了scoped属性，防止样式冲突。<style lang="less" scoped>样式穿透/deep/深度选择器，来给添加了scoped属性，提供让样式对某些子组件生效。<style lang="less" scoped> /deep/ .title { color: aqua; }</style>...
2021-08-18 16:45:05
1216
原创 组件化开发（一）
组件的基本了解一、概念：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发与维护。二、好处：提高了前端代码的复用性和灵活性，提高了开发效率和后期的可维护性。三、vue中的组件化开发1、项目中的.vue就是组件每个.vue组件由3部分构成：① template 组件的模板结构② script 组件的JavaScript行为③ style 组件的样式注：每个组件中必须包含template模板结构，而script行为和style样式的可选的组成部分。2、组件的template
2021-08-17 17:30:29
181
原创 创建vite的项目
一、创建vite的项目按照顺序执行命令，即可基于vite创建vue 3.x的工程化项目：npm init vite-app 项目名称cd 项目名称npm installnpm run dev①创建项目运行npm init vite-app sv01②安装依赖包cd sv01npm install 简写npm i③运行vue3npm run dev二、项目的目录结构src中项目源代码目录：3、vite项目的运行流程在项目中，vue只要做：通过main.js
2021-08-17 16:36:27
1319
原创 SPA单页面应用程序（一）
SPA单页面应用程序一、概念：指一个Web网站中只有唯一的一个HTML页面，所有功能与交互都在这唯一的一个也页面内完成。二、特点：单页面应用程序将所有功能局限于一个web中，仅在该web页面初始化时加载相应的资源（HTML、JavaScript、CSS）。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用JavaScript动态地变换HTML的内容，从而实现页面与用户的交互。三、优点：①良好的交互体验1、页面应用的内容的改变不需要加载整个页面2、获取数据也是通过Aja
2021-08-17 15:52:29
199
原创 vue指令（三）
一、指令的概念用于辅助开发者渲染页面的基本架构。指令分为6大类：①属性绑定②时间绑定③内容绑定内容渲染指令主要用来渲染DOM元素的文本内容。常用有3个Ⅰ、v-text例子：把username对应的值，渲染到第一个p标签中,v-text指令会覆盖元素内默认的值<p v-text="username"></p><!-- 米玛被password中的值(密码)覆盖--><p v-text="password">米玛</p><
2021-08-17 02:56:07
2885
原创 vue学习基本使用（二）
非工程基本流程：①导入vue脚本文件。②声明要被vue所控制的DOM区域，双花括号渲染对应的值<!-- 声明要被vue所控制的DOM区域 --><div id='app'>{{username}}</div>③创建vue实例对象<script> const vm = new Vue({ //使用el属性，指定vue要控制的区域 el: '#app', //数据 data: {
2021-08-16 13:15:26
74
原创 vue学习（一）
一、Vue是前端框架，它提供了构建用户界面的一整套解决方案：①vue（核心库）②vue-router（路由方案）③vue组件库（快速搭建页面UI效果方案）④vuex（状态管理方案）二、最常用辅助vue项目开发工具：①vue-cli （npm全局包：一键生成工程化的vue工具 -基于webpack）②vite （npm全局包：一键生成工程化的vue项目）③vue-devtools（浏览器插件：辅助调试工具）④vetur（vscode插件：提供语法高亮和智能显示）三、核心原理MVVM实现数据
2021-08-16 02:57:19
120
原创 webpack学习（一）
01、webpack概念概念：前端项目工程化的具体解决方案（主流框架vue，react都是基于webpack进行工程化开发的）。主要作用：①代码压缩混淆（删除空格及注释，让代码体积更小，提升页面打开速度）；②处理浏览器JS兼容性（如：在IE8中只能用var，不能用let，webpack可以把ES6等高级代码转化为IE8等低级的代码）③性能优化好处：提高开发效率和工程维护性。02、webpack基本使用流程：① 新建英文文件夹（中文会报错），运行命令npm init -y命令(直接在目录上输入c
2021-08-16 00:46:54
105
原创 推荐系统之Mahout学习（六）
基于信息检索（IR）指标来评估推荐系统优劣使用IR指标来评估推荐系统，使用IR评估获得精确率(Precision)和召回率(Recall)和f-measure（精确率(Precision)和召回率(Recall)加权调和平均）。精确率(Precision)：召回率(Recall)：f-measure计算公式:精确率(Precision)和召回率(Recall)加权调和平均.当β=1...
2019-01-10 17:54:38
566
1
原创 推荐系统之Mahout学习（五）
推荐系统的评估import org.apache.mahout.cf.taste.common.TasteException;import org.apache.mahout.cf.taste.eval.RecommenderBuilder;import org.apache.mahout.cf.taste.eval.RecommenderEvaluator;import org.apa...
2019-01-10 03:02:57
292
原创 推荐系统之Mahout学习（四）
Recommender构建一个最简单的recommender简单流程为：①：创建DataModel读取数据源文件（读入DataModel的文件的格式为：用户ID，物品ID，偏好值，时间戳）。②：相似度计算。③：如果是UserCF则需要使用选择近邻算法（NearestNUserNeighborhood 参数为（邻居个数，相似度，datamodel），ThresholdUserNeighbo...
2019-01-08 13:12:47
1109
1
原创 推荐系统之Mahout学习（三）
Data Model 数据模型上一次的学习知道了如何储存单个用户的偏好使用PreferenceArray。如何储存所有用户的偏好数据呢？由于Mahout没有常用的Map和set，它使用的是基于hash的FastByIDMap，其中FastByIDMap的Key和Value都是long类型的。实例： import org.apache.mahout.cf.taste.impl.mod...
2019-01-07 11:43:23
320
原创 推荐系统之Mahout学习（二）
偏好数组Preference在Mahout中，用户的喜好被抽象为一个Preference，包含了userId，itemId和偏好值（user对item的偏好）。Preference是一个接口，它有一个通用的实现是GenericPreference。实例：import org.apache.mahout.cf.taste.impl.model.GenericPreference;impo...
2019-01-07 01:19:52
311
原创 推荐系统之Mahout学习（一）
推荐系统简介互联网的出现和普及给用户带来了大量的信息，满足了用户在信息时代对信息的需求，但随着网络的迅速发展而带来的网上信息量的大幅增长，使得用户在面对大量信息时无法从中获得对自己真正有用的那部分信息，对信息的使用效率反而降低了，这就是所谓的信息超载问题。解决信息超载问题一个非常有潜力的办法是推荐系统，它是根据用户的信息需求、兴趣等，将用户感兴趣的信息、产品等推荐给用户的个性化信息推荐系统。和...
2019-01-05 14:00:49
561
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人