标准网站建设推荐,二级域名 电子商务网站推广方案,做网站一万,好用的wordpress app目录
本日学习
内容介绍
Axios
Node
NPM包管理器
Babel
模块化
Webpack
搭建前端工程
前端框架介绍
前端开发过程介绍
登录改造成本地接口 本日学习 1. 了解Axios :他是异步请求用的#xff0c;前后端。 用于在浏览器和 Node.js 中发送 HTTP 请求。它支持从服务器…目录
本日学习
内容介绍
Axios
Node
NPM包管理器
Babel
模块化
Webpack
搭建前端工程
前端框架介绍
前端开发过程介绍
登录改造成本地接口 本日学习 1. 了解Axios :他是异步请求用的前后端。 用于在浏览器和 Node.js 中发送 HTTP 请求。它支持从服务器获取数据、上传数据以及执行其他与 HTTP 相关的操作。 2.Node:它允许你在服务器端运行 JavaScript. 3.Npm:是node.js 的软件管理包 4.Bable:转换器。Ems6到5 的转换器 5.weback:模块打包器
熟知 1.前端工程的流程 1.首先添加路由为了可以跳转地址。 2.添加新页面修改路由配置。 3.以下为第三步中登录和删除的功能。 4.实现前端页面 2. 知道request.js 作用 src/utils/request.js:他的作用就是 地址。访问的地址 base api: 3.跨域的概念当一个网页的 JavaScript 代码尝试访问不同源不同协议、域名或端口的资源时就会引发跨域问题。说白了就是浏览器访问后台的东西 内容介绍 1、Axios重点 2、Node 3、NPM重点 4、babel 5、模块化重点 6、webpack 7、前端工程搭建 8、前端工程介绍 9、前端开发过程介绍 10、登录改造成本地接口 Axios 1、是什么 在浏览器中可以帮助我们完成 ajax请求的发送 $.get(‘url’,data{ }) 2、创建实例导入依赖 1创建目录、添加js 3创建模拟测试数据 {success: true,code: 20000,message: 成功,data: {items: [{id: 1,name: 刘德华,intro: 毕业于师范大学数学系热爱教育事业执教数学思维6年有余},{id: 2,name: zhang3,intro: 毕业于师范大学数学系热爱教育事业执教数学思维6年有余},{id: 3,name: li4,intro: 毕业于师范大学数学系热爱教育事业执教数学思维6年有余}]}} 4、实现实例 1初步实现 bodydiv idapp/divscript srcvue.min.js/scriptscript srcaxios.min.js/scriptscriptlet app new Vue({el:#app,data:{userList:[] },created () {this.getData() },methods: {getData(){axios.get(data.json).then(response{console.log(response)})}}})/script/body 2完成实例 bodydiv idapptabletr v-foruser in userListtd{{user.id}}/tdtd{{user.name}}/tdtd{{user.intro}}/td/tr/table/divscript srcvue.min.js/scriptscript srcaxios.min.js/scriptscriptlet app new Vue({el: #app,data: {userList: []},created() {this.getData()},methods: {getData() {axios.get(data.json).then(response {console.log(response)this.userList response.data.data.items}).catch(error {console.log(error)})}}})/script/body Node 1、是什么 1java独立运行需要jdkjs独立运行需要node 2web工程发布需要tomcatjs服务工程运行需要node 2、安装 1安装包 node -v 3、独立运行js代码 1创建目录、创建实例 console.log(Hello Node.js) 2进入命令行窗口运行 3使用工具终端窗口 4、js服务工程运行 1创建实例 const http require(http); http.createServer(function (request, response) { // 发送 HTTP 头部 // HTTP 状态值: 200 : OK // 内容类型: text/plain response.writeHead(200, {Content-Type: text/plain}); // 发送响应数据 Hello World response.end(Hello Server); }).listen(8888); // 终端打印如下信息 console.log(Server running at http://127.0.0.1:8888/); 2运行 5、问题解决 1在cmd下运行node命令正常在vscode里运行报错 *原因vscode权限不够 *解决调整权限 2在cmd下运行node命令报错 可以重启系统 卸载node后重新安装 NPM包管理器 1、是什么 NPM全称Node Package Manager是Node.js包管理工具是全球最大的模块生态系统里面所有的模块都是开源免费的也是Node.js的包管理工具相当于前端的Maven 2、安装 npm -v 3、使用npm 1创建目录 2在终端初始化 npm init npm init -y 3修改npm镜像 #经过下面的配置以后所有的 npm install 都会经过淘宝的镜像地址下载 npm config set registry https://registry.npm.taobao.org #查看npm配置信息 npm config list 4下载依赖 *指定下载 npm install jquery #根据package.json中的配置下载依赖初始化项目 npm install # 局部安装 npm install -D eslint #全局安装 npm install -g webpack
Babel 1、是什么 Babel是一个广泛使用的转码器可以将ES6代码转为ES5代码从而在现有环境执行执行。 这意味着你可以现在就用 ES6 编写程序而不用担心现有环境是否支持。 2、安装 npm install --global babel-cli #查看是否安装成功 babel --version 3、使用 1创建新目录npm初始化 npm init -y 2创建目录、创建ES6代码 // 转码前 // 定义数据 let input [1, 2, 3] // 将数组的每个元素 1 input input.map(item item 1) console.log(input) 3添加配置文件 .babelrc { presets: [es2015], plugins: [] } 4安装转码器 npm install --save-dev babel-preset-es2015 5创建目录进行转码 *转单个文件 babel src/01.js -o dist/001.js *转整个目录 babel src -d dist 模块化 1、是什么 Javascript模块化在一个js文件中导出函数或方法在另一个文件中导入相关函数方法 2、为什么 解决命名冲突、文件依赖 3、实现ES5模块化 1在babeldemo目录下创建目录module 2创建导出1.js const sum function(a,b){return parseInt(a) parseInt(b)}const subtract function(a,b){return parseInt(a) - parseInt(b)}//简写module.exports {sum,subtract}3创建导入2.js//引入模块注意当前路径必须写 ./const m require(./1.js)console.log(m)const result1 m.sum(1, 2)const result2 m.subtract(1, 2)console.log(result1, result2) 4运行 4、实现ES6模块化方式一函数方式 1创建目录es6 2导出文件01.js export function getList() {console.log(获取数据列表)}export function save() {console.log(保存数据)}3导入文件02.js//只取需要的方法即可多个方法用逗号分隔import { getList, save } from ./01.jsgetList()save() 4运行测试 *node不支持es6 5借助babel转码 5、实现ES6模块化方式二方法方式 1导出文件001.jsexport default {getList() {console.log(获取数据列表2)},save() {console.log(保存数据2)}}2导入文件002.jsimport user from ./001.jsuser.getList()user.save() 3测试同上
Webpack 1、是什么 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析然后将这些模块按照指定的规则生成对应的静态资源。 2、安装 npm install -g webpack webpack-cli webpack -v 3、创建目录、初始化 4、打包js 1创建源码目录src创建相关js *01.jsexports.info function (str) {document.write(str);}*02.jsexports.add function (a, b) {return a b;}2src下创建main.jsconst common require(./01);const utils require(./02);common.info(Hello world! utils.add(100, 200));3webpack目录下创建配置文件webpack.config.jsconst path require(path); //Node.js内置模块module.exports {entry: ./src/main.js, //配置入口文件output: {path: path.resolve(__dirname, ./dist), //输出路径__dirname当前文件所在路径filename: bundle.js //输出文件}} 4打包js webpack webpack --modedevelopment #没有警告 5创建页面导入js webpack目录下创建index.html bodyscript srcdist/bundle.js/script/body 6发布测试 5、打包css 1安装style-loader和 css-loader npm install --save-dev style-loader css-loader 2在webpack.config.js添加相关内容 const path require(path); //Node.js内置模块module.exports {entry: ./src/main.js, //配置入口文件output: {path: path.resolve(__dirname, ./dist), //输出路径__dirname当前文件所在路径filename: bundle.js //输出文件},module: {rules: [ { test: /\.css$/, //打包规则应用到以css结尾的文件上use: [style-loader, css-loader]} ] }}3在src文件夹创建style.cssbody{background:pink;} 4在main.js中导入样式 require(./style.css); 5重新打包 搭建前端工程 1、工程选型 在已有的开源后台管理系统上做二次开发 2、搭建工程标准步骤 1工程包 2修改名称yygh-admin复制到工程目录下 3进入终端目录运行命令下载依赖 npm install 4运行命令启动 npm run dev 2、搭建工程快捷步骤 1工程包 2修改名称yygh-admin复制到工程目录下 3进入终端目录运行命令启动 npm run dev
前端框架介绍 1、目录概览 2、目录介绍 1一级目录 *build // 构建脚本 *mock//模拟接口、数据 *src//源码目录 *开发环境配置 *主配置文件 2二级目录src *api//前后端对接接口 *layout//存放布局组件 *router//路由目录 *views//视图目录存放页面组件 前端开发过程介绍 登录改造成本地接口 1、分析改造方案 1分析网络请求 2实现方案 *loginpost {code:20000,data:{token:admin-token}}*infoget {code:20000,data:{roles:[admin],introduction:I am a super administrator,avatar:https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif,name:Super Admin}}2、创建后端模拟登陆接口 ApiOperation(value 模拟登陆)PostMapping(login)// {code:20000,data:{token:admin-token}}public R login(){return R.ok().data(token,admin-token);}ApiOperation(value 模拟获取用户信息)GetMapping(info)//{code:20000,data:{roles:[admin],//introduction:I am a super administrator,//avatar:https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif,//name:Super Admin}}public R info(){MapString,Object map new HashMap();map.put(roles,admin);map.put(introduction,I am a super administrator);map.put(avatar,https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif);map.put(name,Super Admin);return R.ok().data(map);} 3、改造前端 1修改运行时配置 2修改api接口方法 4、登陆测试 1错误日志 2错误定位 *URL错误 *跨域问题确认系统访问中协议、IP地址、端口号有一个发生变化就会出现跨域问题 3解决问题
