黑色礁石 發表於 2020-10-22 14:01:00

前端开发快速入门

<h3 id="一了解前端技术栈">一、了解前端技术栈</h3>
<h4 id="1-react前端开发语言着重学习">1. react：前端开发语言（着重学习）</h4>
<ul>
<li>React是用于构建用户界面的JavaScript框架，用于构建高效、快速的用户界面。React 中一切都是组件。</li>
<li>虚拟dom</li>
</ul>
<h4 id="2-webpack前端打包工具">2. webpack：前端打包工具</h4>
<ul>
<li>一个开源的前端打包工具，将你的js、css、img、svg以更优的方式进行解析加载，配置灵活，功能强大</li>
</ul>
<h4 id="3-ant-design商户侧前端使用的ui组件库着重使用">3. ant-design：商户侧前端使用的UI组件库（着重使用）</h4>
<ul>
<li>是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品</li>
</ul>
<h4 id="4-dvareact异步请求以及redux全局数据流">4. dva：react异步请求以及redux全局数据流</h4>
<ul>
<li>dva 首先是一个基于 redux 和 redux-saga的数据流方案</li>
<li>易学易用，仅有 6 个 api，对 redux 用户尤其友好</li>
</ul>
<h4 id="5-es6javascript语言的下一代标准">5. es6：JavaScript语言的下一代标准</h4>
<ul>
<li>es5语言的升级，提供更加强大的语法糖，开发更加便捷,不但能减少代码量，还能解决原来没有完善的问题</li>
<li>目前ES6也是使用最多的javaScript语言标准</li>
</ul>
<h4 id="6axios一个基于-promise-的-http-库可以用在浏览器和-nodejs-中">6.axios:一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中</h4>
<ul>
<li>从浏览器中创建 XMLHttpRequests</li>
<li>从 node.js 创建 http 请求</li>
<li>支持 Promise API</li>
<li>拦截请求和响应</li>
<li>转换请求数据和响应数据</li>
<li>取消请求</li>
<li>自动转换 JSON 数据</li>
<li>客户端支持防御 XSRF</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/749102/202010/749102-20201019213432643-228237111.png" alt="image" loading="lazy"></p>
<h3 id="二项目结构理解">二、项目结构理解</h3>
<p><img src="https://img2020.cnblogs.com/blog/749102/202008/749102-20200823172424599-1381429417.png" alt="image" loading="lazy"></p>
<h4 id="1-node_modules前端组件库管理包">1. node_modules：前端组件库管理包</h4>
<ul>
<li>安装node后用来存放用包管理工具下载安装的包的文件夹,例如react、webpack、轮播图插件等各种库，以便项目使用,类似后端的nuget</li>
</ul>
<h4 id="2-packagejson项目组件库版本管理文件如果我们用自己开发的组件库也是npm组件库的读取文件">2. package.json：项目组件库版本管理文件（如果我们用自己开发的组件库，也是npm组件库的读取文件）</h4>
<ul>
<li>1.管理node_modules组件库版本的配置文件（常用）</li>
<li>2.当你开发自己的组件库，它也是作为组件库的版本管理配置文件（组件库开发）</li>
</ul>
<h4 id="3-babellrces6语法解析">3. .babellrc:es6语法解析</h4>
<ul>
<li>下一代Javascript的标准，浏览器因版本的不同对此会有兼容性问题</li>
<li>.babelrc是Babel的配置文件，放在项目根目录下，结合webpack使用</li>
</ul>
<h4 id="4-webpack配置文件">4. webpack配置文件</h4>
<p>开发环境和生产环境打包希望看到的效果肯定不一样，比如生产环境需要压缩代码，去除注释，开发环境需要热更新，不压缩代码，所以需要存在一套开发环境版本和一套生产环境版本</p>
<ul>
<li>
<p>webpack.config.common.js:webpack公用文件</p>
</li>
<li>
<p>webpack.config.dev.js:webpack开发环境文件</p>
</li>
<li>
<p>webpack.config.prod.js:webpack生产环境文件</p>
</li>
</ul>
<h4 id="node_modules和packagejson">node_modules和package.json</h4>
<p><img src="https://img2020.cnblogs.com/blog/749102/202010/749102-20201018122042497-1342070660.png" alt="image" loading="lazy"></p>
<h4 id="7-src源码目录componentsconfigsmodelsservicesutilsindexejsindexjsrouterjs">7. src：源码目录components、configs、models、services、utils、index.ejs、index.js、Router.js</h4>
<h3 id="三src源码目录讲解">三、src源码目录讲解</h3>
<p>开发一个页面的流程：</p>
<ol>
<li>components文件夹新建js组件、less样式，进行前端静态页开发并连接dva</li>
<li>router.js路由文件引入页面组件，并放置到路由上</li>
<li>models文件夹写入models文件</li>
<li>services文件夹写入services文件</li>
<li>index.js注册对应的models文件或者在路由注册</li>
<li>前后端接口开发联调</li>
</ol>
<p><img src="https://img2020.cnblogs.com/blog/749102/202010/749102-20201019214531076-481373190.png" alt="image" loading="lazy"></p>
<h4 id="31-component">3.1 component</h4>
<p>功能：存放开发的业务组件<br>
包含：</p>
<ol>
<li>js</li>
<li>less</li>
<li>imgs</li>
</ol>
<h5 id="jsx页面结构介绍">jsx页面结构介绍</h5>
<pre><code>import React from 'react'; // 引用react组件
// import './less/test.less';
const param = 1; // 定义常量
// 名称必须大写
class Test extends React.Component {
   constructor(props) {
      super(props);
      // 定义state，在页面或者传递数据使用
      this.state = {
         num: 1,
      };
   }
   // 定义事件
   clickFunc = () =&gt; {
      let { num } = this.state;
      num++;
      this.setState({
         num
      });
   }
   render() {
      // 获取state
      const { num } = this.state;
      return (
         &lt;div className="content"&gt;
            {/*渲染元素*/}
            &lt;div className="count"&gt;{num}&lt;/div&gt;
            {/*点击修改元素*/}
            &lt;button onClick={this.clickFunc}&gt;点击&lt;/button&gt;
         &lt;/div&gt;
      )
   }
}
export default Test
</code></pre>
<h5 id="less样式文件介绍">less样式文件介绍</h5>
<pre><code>// 设置样式
.content{
    // 可设置嵌套样式
    .count{
      
    }
}
</code></pre>
<h4 id="数据讲解">数据讲解</h4>
<p>1.state：内部定义，它只是用来控制这个组件本身自己的状态，页面渲染通过setState进行完成。</p>
<p>2.setState:</p>
<ul>
<li>当我们调用这个函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render 方法所渲染的最新的内容显示到页面上</li>
<li>React.js为了批次与效能并不会马上修改state。而是把这个对象放到一个更新队列里面，稍后才会从队列当中把新的状态提取出来合并到 state 当中，然后再触发组件更新。</li>
</ul>
<p>3.props：外部传入，包括父子组件之间的通信，全局数据流的传递</p>
<ul>
<li>父子组件之间的通信</li>
<li>全局数据流的传递（dva）</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/749102/202009/749102-20200908155729377-2116849470.png" alt="image" loading="lazy"></p>
<h4 id="32-models">3.2 models</h4>
<p>定义每个页面交互的命名空间以及dispatch发起的行为方法和数据的处理</p>
<pre><code>import * as lightMemberRightsManage from '../services/lightMemberRightsManage';

export default {
    //表示对于整个应用不同的命名空间,以便通过this.props.lightMemberRightsManage,规范保证命名空间和当前页面js名称相同
    namespace: 'lightMemberRightsManage',
    state: {},// 表示当前的example中的state状态，这里可以给初始值
    effects: {
      *lightMemberRightsManageGetList({ payload, callback }, { call, put }) {
            const testRes = yield call(lightMemberRightsManage.lightMemberRightsManageGetList, payload);
            //这里的put表示存储在当前命名空间lightMemberRightsManage中，通过success方法存在当前state中
            yield put({
                type: 'success',
                payload: {
                  lightMemberRightsManageGetListResult: testRes
                }
            });
            // 回调函数
            callback &amp;&amp; callback(testRes);
            // 可以promise.then使用
            return testRes;
      }
    },
    //用来保存更新state值 上面的put方法调用这里的方法
    reducers: {
      success(state, { payload }) {
            return {
                ...state,
                ...payload
            }
      }
    }
}
</code></pre>
<h4 id="33-services">3.3 services</h4>
<pre><code>// 异步请求的中转文件
import axios from '../utils/axios';
// 请求地址的文件
import Api from '../configs/api';
export function lightMemberRightsManageGetList(params) {
    return axios.get(configs.host.test + Api.lightMemberRightsManageGetList, { 'params': params });
}
</code></pre>
<h4 id="34-untils工具库">3.4 untils工具库</h4>
<p>定义自己写的工具库，例如异步请求axios、数据截取的公用函数js</p>
<h4 id="35-indexjs">3.5 index.js</h4>
<ol>
<li>项目入口js文件</li>
<li>引用全局样式</li>
<li>引用models文件connect连接组件</li>
<li>引用路由</li>
</ol>
<h4 id="36-indexejs">3.6 index.ejs</h4>
<ol>
<li>单页应用入口html文件</li>
</ol>
<h3 id="37-routerjs">3.7 router.js</h3>
<p>页面路由</p>
<pre><code>import React from 'react';
import PropTypes from 'prop-types';
import {
Switch,
Route,
routerRedux,
} from 'dva/router';
import dynamic from 'dva/dynamic';


const { ConnectedRouter } = routerRedux;
const RouterWrapper = ({ history, app }) =&gt; {
// 开发的组件
const Home = dynamic({
    app,
    component: () =&gt; import('./components/Home'),
});
return (
    &lt;ConnectedRouter history={history}&gt;
      &lt;Switch&gt;
      // 加载路由
      &lt;Route exact path="/" component={Home} /&gt;
      &lt;/Switch&gt;
    &lt;/ConnectedRouter&gt;
};
</code></pre>
<h3 id="四页面开发流程">四、页面开发流程</h3>
<p><img src="https://img2020.cnblogs.com/blog/749102/202010/749102-20201018123756014-272735784.png" alt="image" loading="lazy"></p>
<ul>
<li>1.通过vscode插件生成页面组件、models、services</li>
<li>2.路由注册对应页面</li>
<li>3.index.js引用对应的页面models</li>
<li>4.models,services进行细微调整</li>
<li>5.api接口地址调整对应后端接口地址</li>
</ul>
<h3 id="五实战使用脚手架开发商户侧项目">五、实战：使用脚手架开发商户侧项目</h3>
<pre><code>// 全局安装fl-hscli，生成商户侧脚手架的命令（目前写入的是mall商户侧）
npm i fl-hscli -g

// 进入想要创建项目的文件夹创建项目（projectName是你的项目名称）
create-react-app-fl projectName

// package.json中fl-pro、fulu-method是公司内部组件库，安装模块包之前，先安装公内部组件,不然会报错

npm --registry http://10.0.1.244:8081/repository/npm-group/ install fl-pro@1.8.59   --save

// 安装成功后,执行安装模块包的命令，因为package.json模块非常多,可以使用淘宝镜像进行安装，安装速度快
npm i
cnpm i(需要先安装淘宝镜像)


// 安装成功后，启动项目
npm start

</code></pre>
<h3 id="六商户侧显示效果">六、商户侧显示效果</h3>
<p><img src="https://img2020.cnblogs.com/blog/749102/202010/749102-20201021170627927-1257318668.png" alt="image" loading="lazy"></p>
<h4 id="注意">注意</h4>
<ul>
<li>安装nodejs，才可使用npm命令</li>
<li>cnpm安装：npm install -g cnpm --registry=https://registry.npm.taobao.org</li>
<li>开发者运行的商户侧地址都需要在福禄管家配置回调地址，否则页面打不开,开发环境访问使用自己开启的域名（例如：http://192.168.0.105:3008)/?MerchantId=商户id（bcc1adce-927a-4c0b-88c0-c446a0435b98 ）进行访问</li>
</ul>
<h3 id="七模块包下载工具">七、模块包下载工具</h3>
<h4 id="npm">npm</h4>
<ul>
<li>npm是node官方的包管理器，如果没有锁定版本，通常会直接下载package.json中版本库里最高版本</li>
<li>下载速度慢，可能因为网络原因无法使用npm下载，或者是国外的库无法进行下载</li>
</ul>
<h4 id="cnpm">cnpm</h4>
<ul>
<li>cnpm是个中国版的npm，是淘宝定制的 cnpm,下载速度极快</li>
<li>每隔10分钟去刷新npm库同步到cnpm</li>
<li>不会读取package.lock.json</li>
</ul>
<h4 id="yarn">yarn</h4>
<ul>
<li>断点续传，锁定版本，不过npm5更新之后，两者都没有明显的优劣势</li>
</ul>
<p>后续会做更加详细的讲解</p>
<h3 id="如何提高开发效率">如何提高开发效率</h3>
<h4 id="js">js</h4>
<ul>
<li>公用模块进行提取</li>
</ul>
<ol>
<li>代码片段</li>
<li>vscode插件</li>
<li>封装继承</li>
<li>npm命令行进行项目代码导入</li>
</ol>
<h4 id="css">css</h4>
<ul>
<li>规范的间距、颜色、字体大小、行高、居中、浮动</li>
</ul>
<h4 id="开发规范">开发规范</h4>
<ul>
<li>1.按照目前的目录结构进行开发</li>
<li>2.页面的文件命名具有语义化，对应使用的文件名与其保持一致，组件命名首字母需要大写，其余命名需要使用驼峰命名</li>
</ul>
<h5 id="好处">好处</h5>
<ul>
<li>1.目录结构清晰，根据页面来查找问题更加轻松便捷</li>
<li>2.同事接手也更简单易懂，上手更快</li>
</ul>
<h3 id="开发注意事项">开发注意事项</h3>
<ul>
<li>如果引用的组件或者函数不支持按需加载，引用的话，会把所有功能都打包进来</li>
<li>less文件在生产环境会被打包在一起，所以每个页面的less文件最外层样式必须唯一，不然会互相影响</li>
<li>setState会渲染页面，所以不要在render（渲染页面的函数）里使用setState，不然就会死循环，不要使用this.state赋值（不会重新渲染）</li>
<li>不要直接给props赋值</li>
<li>后续会一直迭代...</li>
</ul>
<div style="display: none">
<span id="fulu-org">福禄开放平台研发中心·B2B2C应用研发部</span>
<span id="fulu-author">福小松</span>
</div><br><br>
来源：https://www.cnblogs.com/fulu/p/13856939.html
頁: [1]
查看完整版本: 前端开发快速入门