前端(Vue/React)
前端
CaoPengCheng&
我是一只小菜鸟,咿呀咿呀哟
展开
-
简易ElementUi+Vue模板
简易ElementUi+Vue模板介绍软件架构安装教程介绍vue简单模板 VueSimpleTemplate基于EladminUI下载地址软件架构ES6、vue、vuex、vue-router、vue-cli、axios、element-ui Node >= 10安装教程1,npm install — 安装依赖2,npm run dev — 启动项目...原创 2022-03-21 00:48:39 · 2567 阅读 · 0 评论 -
Vue使用Echarts展示地图
Vue使用Echarts展示地图一,获取地图json二,Vue实现展示2.1 Vue环境2.2 main.js引入Echarts2.3 展示一,获取地图json阿里云数据可视化平台获取阿里云DataV地图选择器 二,Vue实现展示2.1 Vue环境ES6、vue、vuex、vue-router、vue-cli、axios、element-uiNode >= 102.2 main.js引入Echarts// 引入Echartsimport echarts from 'echart原创 2022-03-20 19:20:01 · 2190 阅读 · 0 评论 -
Vue使用Echarts实现数据可视化
Vue使用Echarts实现数据可视化一,Echarts1.1 获取ECharts1.2 引入 ECharts二,Vue使用Echarts2.1 Vue环境2.2 main.js引入Echarts2.3 使用模板2.4实例2.4.1柱状图(折线图变换)2.4.2极坐标柱状图标签一,Echarts一个基于 JavaScript 的开源可视化图表库Echarts官网 https://echarts.apache.org/zh/index.html1.1 获取ECharts(1)从 npm 获取(项目原创 2022-03-20 18:50:35 · 8463 阅读 · 4 评论 -
第三方网站实现钉钉(DingTalk)扫码登陆(Vue+SpringBoot)
第三方网站实现钉钉(DingTalk)扫码登陆(Vue+SpringBoot)一,本地库添加钉钉UserId字段 字段类型VarChar,管理者的userid为String,其余为Long二,钉钉开放平台配置回调域名。三,前端构造扫码登录页面。(1)配置需要参数 appid: '钉钉APiID', redirectUrl: '回调地址,当前登陆页面地址', apiUrl: '请求后端地址', //二维码设置参数 dingCodeConfig: {原创 2021-11-13 23:02:10 · 19935 阅读 · 14 评论 -
Vue目录结构
Vue目录结构1、build:构建脚本目录 1)build.js ==> 生产环境构建脚本; 2)check-versions.js ==> 检查npm,node.js版本; 3)utils.js ==> 构建相关工具方法; 4)vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀; 5)webpack.base.conf.js ==> webpack基本配置; 6)webpack.dev.conf.js ==> w原创 2021-09-26 08:41:34 · 185 阅读 · 0 评论 -
钉钉api调用
package DingDingApiDemo;import com.alibaba.fastjson.JSONObject;import com.dingtalk.api.DefaultDingTalkClient;import com.dingtalk.api.DingTalkClient;import com.dingtalk.api.request.*;import com.dingtalk.api.response.*;import com.taobao.api.ApiExcepti原创 2021-09-01 22:07:10 · 6921 阅读 · 0 评论 -
React-组件通讯
React-组件通讯(1)父组件 -> 子组件(2)子组件 -> 父组件(3)兄弟组件(4)Contxt【1】父组件 -> 子组件(1)父组件提供要传递的state数据(2)给子组件标签添加属性,值为state中的数据(3)子组件通过props接收到父组件中传递的数据class Parent ectends React.Component{state = {lastName:'王'} renser(){ return( <div> 传原创 2021-07-30 10:51:20 · 83 阅读 · 0 评论 -
React-路由
React-路由【1】路由前端应用大都为SPA(单页应用程序)有效的使用单个页面来管理原来多页面的功能让用户从一个视图(页面)导航到另一个视图(页面)配置路径和组件(配对)【2】路由使用(1)安装 npm install react-router-dom -S 核心组件:Ruoter,Ruoter,Link(2)导入 import {BrowserRouter as Router,Route,Link} from 'react-router-dom'(3)使用Ruoter组件包裹原创 2021-07-27 17:56:38 · 94 阅读 · 0 评论 -
React-表单处理
React-表单处理【1】受控组件(常用)Html中的表单元素是课输入的,也就是有自己的课变状态而,react中可变状态通常保存在state中,并且只能通过setState()方法修改React将state与表单元素值value绑定在一起,由state来控制表单元素的值(1)在state中添加一个状态,作为表单元素的value值(控制表单元素值的来源) state = {txt:''} <input type="text" value={this.state.txt}/>(2原创 2021-07-27 17:45:40 · 293 阅读 · 0 评论 -
React-props
React-props【1】props(1)props 接收传递给组件的数据 传递数据:给组件标签添加属性(2)props传教接收 传递数据: name="jack" age={19}表示传递数据 <Hello name="jack" age={19} /> 接收数据: a,函数组件const Hello = (props)=> { console.log(props) return( <div>接受数据:{props.name}原创 2021-07-30 10:38:29 · 59 阅读 · 0 评论 -
React-概叙-JSX
React-概叙-JSX【1】概叙写HTML页面或者构建web应用只负责视图渲染ES6:import,class特点: (1)声明式 (2)基于组件 (3)学习一次,随处使用 可以开发Web应用 可以开发移动端原生应用(react-native) 可以开发VR应用(react 360)const jsx = <div className="app"> <h1>Hello World! 动态变化数据:{count}</h1></原创 2021-07-27 17:36:48 · 69 阅读 · 0 评论 -
React-组件
React-组件【1】组件:(1)函数组件:使用js的函数(或箭头函数)创建的组件名字首字母大小,必须有返回值function Hello(){ return <div>Hello</div>}ReactDOM.render(<Hello />,document.getElementById('root'))const Hello = () => <div>Hello</div>s(2)类组件 大写开头,必须有返回值原创 2021-07-27 17:41:24 · 69 阅读 · 0 评论 -
Element ui+Vue+SSM-简易学生信息管理系统-前端登录页面
Element ui+Vue+SSM-简易学生信息管理系统-前端登录页面采用element ui的form直接复制代码View下新建login.vue更改为所需要的<template> <div class="main"> <canvas id="particle-canvas" width="925" height="892"></canvas> <div class="login"> <h1原创 2021-06-14 18:00:47 · 2158 阅读 · 0 评论 -
Element ui+Vue+SSM-简易学生信息管理系统-请求封装
Element ui+Vue+SSM-简易学生信息管理系统-请求封装建立util包,request.js封装get和post方法,还有请求相应拦截方法加入进度条nprogressimport axios from 'axios'//请求相关的方法import NProgress from 'nprogress'import 'nprogress/nprogress.css'//初始化一个axios对象var instance = axios.create({ //超时时间原创 2021-06-14 19:34:01 · 1374 阅读 · 6 评论 -
RuoYi(若依开源框架)-前后端分离版-前端流程简单分析
RuoYi(若依开源框架)-前后端分离版-前端项目流程简单分析项目结构├── build // 构建相关├── bin // 执行脚本├── public // 公共文件│ ├── favicon.ico // favicon图标│ └── index.html // html模板├── src原创 2021-07-21 11:20:25 · 11685 阅读 · 7 评论 -
RuoYi(若依开源框架)-前后台分离版-idea搭建运行
若依-前后台分离版-idea搭建运行完全响应式布局(支持电脑、平板、手机等所有主流设备)强大的一键生成功能(包括控制器、模型、视图、菜单等)支持多数据源,简单配置即可实现切换。支持按钮及数据权限,可自定义部门数据权限。对常用js插件进行二次封装,使js代码变得简洁,更加易维护完善的XSS防范及脚本过滤,彻底杜绝XSS攻击Maven多项目依赖,模块及插件分项目,尽量松耦合,方便模块升级、增减模块。国际化支持,服务端及客户端支持完善的日志记录体系简单注解即可实现环境及技术JDK >原创 2021-07-19 17:23:57 · 3891 阅读 · 2 评论 -
idea,PyCharm以及系列产品汉化
idea,PyCharm以及系列产品汉化Ctrl+Alt+s 进入设置或者从File进入选择Plugins搜索chinese 便会出来,选择汉化,安装就好安装好重启就好了原创 2021-06-14 17:23:40 · 121 阅读 · 0 评论 -
Vue+Element ui idea开发配置
Vue+Element ui idea开发配置Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库官网:https://element.eleme.cn/#/zh-CNidea 打开vue项目设置插件,安装vue.js服务选择运行,编辑配置,添加npm命令:npm脚本:server更改项目删除views,components下的视图和组件添加全局配置文件vue.config.js// 配置全局文件const path = requ原创 2021-06-14 17:19:51 · 1788 阅读 · 0 评论 -
Vue3.0-ui创建项目
Vue3.0-ui创建项目安装Vue3.0(先安装node.js)查看版本号:vue -V查看是否有ui功能:vue -h卸载老版本:npm uninstall vue-cli -g下载新版本:npm install @vue/cli -gdos端输入vue ui 启动界面创建项目通过ui创建vue项目点击创建项目手动配置预设勾选路由和vuex服务,还有css服务,项目可使用scss选择scss和下面那个,选择图中的点击创建项目,直接创建,不保存预设创建时间很长,等原创 2021-06-14 17:01:22 · 292 阅读 · 2 评论 -
搭建Vue项目
搭建Vue项目一,安装node.js去官网:https://nodejs.org/en/node –v node.js版本安装npm命令:npm install -g cnpm --registry=https://registry.npm.taobao.orgNpm -v npm版本标题二,安装vue-cli脚手架cnpm install --global vue-cli二, 搭建vue项目在本地磁盘选择一个磁盘,然后创建一个文件夹用来存放即将创建的Vue项目,然后在命令窗口原创 2021-05-21 15:09:32 · 164 阅读 · 11 评论