ssm实战（9）-----前端开发（Windows环境下配置）

2022-07-25 11:13:10

模块 (采用commonJS 模块化开发)

用户模块：数据安全处理；表单同步/异步验证；小型SPA开发；

商品模块：jQuery插件模块化；独立组件抽离技巧；多功能列表开发；

购物车模块：商品状态随时验证；模块内部方法调用方式；非form提交时的数据验证；

订单模块：modal式组件封装思想；城市级联操作；复杂表单回填；

支付模块: 对接支付宝；支付状态检测；支付成功回执处理；

注：分层次：有 MVC 、 MVVM (M V VM ) 分层架构；分模块： commonJS ，ES6

（教学视频课会把一些基本的内容说的很高大上）

安装软件： NodeJs ； Git ；Sublime ；Chrome ；Charless/Fiddler(抓包工具)

sublime安装插件：ctrl +shift + p

subllime快捷键：

了解跨域问题： https://segmentfault.com/a/1190000015597029

fiddler入门： https://www.cnblogs.com/woaixuexi9999/p/9247705.html ; 拦截请求 https://www.cnblogs.com/GreenLeaves/p/6971452.html

webpack

其他人的配置过程：https://juejin.im/post/5c7f28056fb9a049bb7d169a

webpack 应该是官方中文文档：https://www.webpackjs.com/guides/installation/ 版本更新可能会和以前安装方式不一样，先看官方的文档，比较经常更新

webpack入门：https://zhaoda.net/webpack-handbook/preface.html

webpack 安装： https://segmentfault.com/a/1190000013699050 验证（要带上完全的路径）：node_modules/.bin/webpack -v

学习怎么配置入口、出口文件：多个入口对应多个出口 js/[name].js

const path = require(‘path‘);
/*页面入口,配置多个入口*/
var config = {
  mode: ‘development‘,
  entry: {
  	‘index‘ : ‘./src/page/index/index.js‘,
  	‘login‘ : ‘./src/page/login/index.js‘
  },
  output: {
    filename: ‘js/[name].js‘,
    path: path.resolve(__dirname, ‘dist‘)
  }
};
module.exports = config;

引入jQuery文件：

安装： npm install jquery --save

引入和使用：

方式1：以变量的方式安装jQuery（这个方式只是在js文件局部引入）

var $ = require(‘jquery‘)
$(‘body‘).html(‘hello jquery‘);

方式2：在HTML全局引入

在HTML加入（cdn）：<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>

然后：在js文件也可以使用 $(‘body‘).html(‘hello jquery‘);

提取公共模块：共享一些文件，而不是每个都复制一份

使用commonschunkplugin插件：https://segmentfault.com/a/1190000016623314 https://blog.csdn.net/qq_16559905/article/details/79404173

处理CSS： https://juejin.im/post/5c7a7ba9f265da2da53ee725

　　使用插件： style-loader ; css-loader 对css进行单独打包。看这个-----》 https://www.jianshu.com/p/b230a69be59b

html-webpack-plugin插件：https://simplecodecx.github.io/blog/20190224/e9584fe7.html

提取头文件： npm install -D html-loader

引入代码：

<head>
	<%= require(‘html-loader!./layout/html-head.html‘) %>
</head>

接下来是关于如何处理图片资源和文件处理：

安装 url-loader

介绍：https://www.jianshu.com/p/8ff8e71dcbc6

npm install url-loader --save-dev

安装webpack-dev-server （用于方便开发）：npm install webpack-dev-server --save-dev

介绍：https://segmentfault.com/a/1190000006670084

运行(两种模式)：

E:\javaRoad\code\combat\front_end\eshop-fe\node_modules/.bin/webpack-dev-server

webpack-dev-server --inline --port 8088 ( E:\javaRoad\code\combat\front_end\eshop-fe\node_modules/.bin/webpack-dev-server --inline --port 8088 )

webpack-dev-server --inline --content-base ./dist

命令：

运行局部webpack（完全的路径） E:\javaRoad\code\combat\front_end\eshop-fe\node_modules/.bin/webpack

注：

scripts 用于命令行输入 num run 脚本名，则相当于在命令行运行脚本内容。我的是Windows10 ，mac下传参方式不一样

{
  "name": "eshop-fe",
  "version": "1.0.0",
  "description": "eshop前端",
  "main": "index.js",
  "scripts": {
    "dev"         : "E:/javaRoad/code/combat/front_end/eshop-fe/node_modules/.bin/webpack-dev-server --inline --port 8088 && set WEBPACK_ENV=dev",
    "dist"        : "E:/javaRoad/code/combat/front_end/eshop-fe/node_modules/.bin/webpack && set WEBPACK_ENV=online"
  },
  "author": "anitano",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {}
}

...end

ssm实战（9）-----前端开发（Windows环境下配置）

码农公寓

相关文章