前端
仲尼叔叔
个人博客地址:http://karma520.com
展开
-
Reactjs项目构建
1.通过node环境创建react工程插件npm install -g create-react-app2.指定目录创建React工程create-react-app <工程名>3.进入目录启动项目cd <工程根目录>yarn start4.创建第一个组件创建welcome.jsimport React, {Component} from 'react';class Welcome extends Component { render() {原创 2020-09-16 10:37:50 · 268 阅读 · 0 评论 -
element-UI日期时间选择器el-date-picker
<template> <div> <el-form :model="form" label-width="150px" ref="form" :rules="rules" class="form"> <el-form-item label="举办时间" prop="holdTime"> ...原创 2019-11-04 18:14:41 · 1615 阅读 · 0 评论 -
Centos部署node.js
Centos部署node.js(1)将node官网下载的node-v8.11.1-linux-x64.tar.xz 上传至服务器(2)解压xz文件xz -d node-v8.11.1-linux-x64.tar.xz(3)解压tar文件tar -xvf node-v8.11.1-linux-x64.tar(4)目录重命名mv node-v8.11.1-linux-x64 node...原创 2019-01-14 22:57:02 · 580 阅读 · 0 评论 -
Mock.js数据生成器
1 Mock.js1.1 什么是Mock.jsMock.js (官网http://mockjs.com/)是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:根据数据模板生成模拟数据模拟 Ajax 请求,生成并返回模拟数据基于 HTML 模板生成模拟数据Mock.js具有以下特点:前后端分离让前端攻城师独立于后端进行开发。增加单元测试...原创 2019-01-14 17:22:37 · 5815 阅读 · 0 评论 -
运用Swagger编写API文档
1 运用Swagger编写API文档1.1 Swagger1.1.1什么是Swagger 随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染、先后端分离的形态,而且前端技术和后端技术在各自的道路上越走越远。 前端和后端的唯一联系,变成了API接口;API文档变成了前后端开发人员联系的纽带,变得越来越重要,swagger就是一款让你更好的书写API文档的框架。...原创 2019-01-14 16:09:27 · 2165 阅读 · 1 评论 -
Vuetify中自定义富文本编辑器
4.1.示例:&lt;v-editor v-model="goods.spuDetail.description" upload-url="/upload/image" fileName="file"/&gt;4.2.效果:4.3.属性说明属性列表:属性名说明数据类型默认值value编辑器的输出结果,可以用v-model双向绑定原创 2019-01-03 23:18:46 · 1816 阅读 · 0 评论 -
Vue中vuetify.js树组件的用法
1.1.示例&lt;v-tree url="/item/category/list" :isEdit="true" @handleAdd="handleAdd" @handleEdit="handleEdit" @handleDelete="handleDelete&原创 2019-01-03 23:11:57 · 4948 阅读 · 3 评论 -
Node.js安装及环境变量配置(windows)
1.下载安装(省略)2.检查node、npm是否安装成功node -vnpm -v3.环境配置进入node.js根目录,创建node_global和node_cache文件夹,输入cmd命令:npm config set prefix "D:\Program Files\nodejs\node_global"npm config set cache "D:\Program File...原创 2019-07-10 17:26:08 · 800 阅读 · 0 评论 -
vue axios 给生产环境和发布环境配置不同的接口地址
本项目是vue-cli搭建的项目框架,引入axios用于数据请求。配置不同的接口地址,(首先确保已经集成了axios,如对集成axios有疑问的道友,可参看我之间的一篇博客vue-cli 引入axios)操作如下一、设置不同的接口地址找到如下文件/config/dev.env.js/config/prod.env.js之后增加接口地址域名配置,增加后的文件内容如下:im...原创 2018-10-15 13:10:00 · 927 阅读 · 0 评论 -
第1章 前端环境搭建
第1章 前端环境搭建学习目标:了解十次方需求、技术架构,理解前后端分离开发模式掌握Node.js基本使用方法,理解模块化编程掌握包资源管理器NPM的使用说出webpack的作用掌握vs code开发工具的基本使用方法掌握ES6常用的新特性语法1 十次方需求分析与技术架构1.1 十次方是个什么样的网站《十次方》是程序员的专属社交平台,包括头条、问答、活动、交友、吐槽、招聘六大...原创 2019-01-17 22:36:13 · 444 阅读 · 0 评论 -
第2章 API文档与模拟数据接口
1 RESTful1.1 什么是RESTful架构 RESTful架构,就是目前最流行的一种互联网软件架构。它结构清晰、符合标准、易于理解、扩展方便,所以正得到越来越多网站的采用。REST这个词,是Roy Thomas Fielding在他2000年的博士论文中提出的 Fielding是一个非常重要的人,他是HTTP协议(1.0版和1.1版)的主要设计者、Apache服务器软件的作者之...原创 2019-01-17 22:43:10 · 561 阅读 · 0 评论 -
EasyMock
1 什么是EasyMock Easy Mock 是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 mock 服务。以项目管理的方式组织 Mock List,能帮助我们更好的管理 Mock 数据。地址:https://www.easy-mock.com在线文档:https://www.easy-mock.com/docs2 EasyMock基本入门2....原创 2019-01-14 23:56:05 · 1755 阅读 · 0 评论 -
NUXT获取接口数据(跨域)
首先已经在项目中引入了axios,并将其封装了import axios from 'axios'import {getUser} from "@/utils/auth";//创建axios实例const service = axios.create({ baseURL: 'http://192.168.238:9012',//api的base_url timeout: 30000,...原创 2019-02-26 10:30:03 · 6082 阅读 · 7 评论 -
vue-quill-editor富文本编辑器(基于Vue脚手架)
(1)安装vue-quill-editorcnpm install vue-quill-editor --save或npm install vue-quill-editor --save(2)plugins下创建nuxt-quill-plugin.jsimport Vue from 'vue'import VueQuillEditor from 'vue-quill-editor/d...原创 2019-08-09 16:26:50 · 1464 阅读 · 0 评论 -
Vue中Share.js分享组件
Share.js是一款一键转发工具,它可以一键分享到新浪微博、微信、QQ空间、QQ好友、腾讯微博、豆瓣、Facebook组件、Twitter、Linkedin、Google+、点点等社交网站,使用字体图标。以下步骤可以实现微博和微信分享(1)修改test.vue的脚本部分。以下代码用于引入外部的js .我们这里的js采用cdn方式引入 地址为:https://cdn.bootcss.com...原创 2019-01-21 17:09:46 · 12558 阅读 · 1 评论 -
第8章 1024前端系统开发
网站前台-交友与聊天学习目标:1.推荐好友列表1.1数据渲染(1)easyMock模拟数据URL: friend/friend/listMethod: GET{ "flag": true, "code": 20000, "data": [{ "nickname": "小雅", "pic": "https://ss3.bdstati原创 2019-01-17 22:58:05 · 721 阅读 · 1 评论 -
第7章 网站前台-吐槽与问答
1 吐槽列表与详细页1.1 吐槽列表页1.1.1 吐槽列表页数据渲染吐槽列表页已经构建,我们现在来实现数据的渲染(1)easyMock模拟数据URL: spit/spit/search/{page}/{size}Method: post{ "code": 20000, "flag": true, "message": "查询成功", "data": { "to.原创 2019-01-17 22:55:55 · 13261 阅读 · 0 评论 -
第6章 网站前台-登陆与用户中心
1 用户注册1.1 页面构建创建pages/login.vue<template> <div class="wrapper loginsign"> <div class="item signup"> <div class="form"> <h3 class="loginsign原创 2019-01-17 22:53:45 · 1422 阅读 · 0 评论 -
第5章 网站前台-活动与招聘
1 服务端渲染技术NUXT1.1 什么是服务端渲染 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容,而不是在客户端通过AJAX获取数据。 与传统 SPA(Single-Page Application - 单页应用程序)相比,服务器端渲染(SSR)的优势主要在于:更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 请注意,截...原创 2019-01-17 22:50:41 · 655 阅读 · 0 评论 -
第4章 路由与状态管理
1 路由vue-router1.1 什么是vue-router vue-router就是vue官方提供的一个路由框架。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。1.2 快速入门1.2.1 初始化工程# 全...原创 2019-01-17 22:48:19 · 572 阅读 · 0 评论 -
第3章-使用ElementUI开发管理后台-1
1 管理后台搭建我们的十次方管理后台就采用ElementUI来进行搭建.1.1 什么是ElementUIElement 饿了么前端出品的一套 Vue.js 后台组件库官网: http://element.eleme.io/#/zh-CN1.2 神奇的脚手架1.2.1 快速搭建 官网上提供了非常基础的脚手架,如果我们使用官网的脚手架需要自己写很多代码比如登陆界面、主...原创 2019-01-17 22:46:41 · 1265 阅读 · 0 评论 -
live-server
1.live-server没有webpack,我们就无法使用webpack-dev-server运行这个项目,实现热部署。所以,这里我们使用另外一种热部署方式:live-server,1.1.简介地址;https://www.npmjs.com/package/live-server这是一款带有热加载功能的小型开发服务器。用它来展示你的HTML / JavaScript / CSS,但...原创 2019-01-11 01:00:52 · 2173 阅读 · 0 评论