实战：三

2022-04-15 01:31:06 阅读：169 来源： 互联网

Vue的声明周期函数

<div id="app">
    {{msg}}
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg:'hello'
        },
        created() { //在页面渲染之前执行
            debugger
            console.log('created.....')
        },
        mounted() {//在页面渲染之后执行
            debugger
            console.log('mounted.....')
        }
    })
</script>

Axios

axios是独立于vue的一个项目，可以用于浏览器和node.js中发送ajax请求。

new Vue({
        el: '#app',
        data: {
            userList:[]
        },
        created() { //在页面渲染之前执行
            //调用方法，得到返回json数据
            this.getList()
        },
        methods:{
            getList() {
                //使用axios方式ajax请求
                axios.get("user.json")
                    .then(response => {//请求成功
                        //console.log(response)
                        this.userList =  response.data.data.items
                        console.log(this.userList)
                    }) 
                    .catch(error => {
                        console.log(error)
                    }) //请求失败
            }
        }

Element-ui

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建。

官网：https://element.eleme.cn/#/zh-CN

Node.js

脱离浏览器环境也可以运行JavaScript，只要有JavaScript引擎就可以。

Node.js是一个基于Chrome V8引擎的JavaScript运行环境：即Node.js内置了Chrome的V8 引擎，可以在Node.js环境中直接运行JavaScript程序。

在Node.js中写JavaScript和在Chrome浏览器中写JavaScript基本没有什么不一样。哪里不一样呢？

Node.js没有浏览器API，即document，window的等。

加了许多Node.js 专属API，例如文件系统，进程，http功能。

BFF技术

一个前端页面向 Service A、Service B 以及 Service C发送请求，不同的微服务返回的值用于渲染页面中不同的组件。此时，每次访问该页面都需要发送 3 个请求。我们需要一个服务来聚合Service A、Service B 以及 Service C响应的数据，这个服务层叫做BFF。

BFF层的作用是让前端有能力自由组装后台数据，减少大量的业务沟通成本，加快业务的迭代速度。

无论是数据聚合还是数据剪裁，这类程序的特点是不需要太强大的服务器运算能力，但是对程序的灵活性有较高的要求，这两个特点都正好和Node.js的优势相吻合。

NPM包管理工具

什么是NPM

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

#npm初始化
npm init
npm init -y #使用默认
#设置镜像
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

#下载依赖,如:下载jquery
npm install jquery
#如果安装时想指定特定的版本
npm install jquery@2.1.x
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或简写
npm i -D eslint
#一些命令行工具常使用全局安装的方式
npm install --global webpack
#或简写
npm install -g webpack

#根据package.json中的配置下载依赖，初始化项目
npm install

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

模块化开发

随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

实现

//这个一个模块
exportdefault {
getList() {
console.log('获取讲师列表')
    },
save() {
console.log('保存讲师')
    }
}
//在另一个模块中调用这个方法
import teacher from"./teacherApi.js" //首先引入这个模块，teacher是对象。
teacher.getList()
teacher.save()

注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。

使用babe来解决这个问题。

Babel

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

#安装Babel
npm install -g babel-cli
#安装转码器
npm install -D babel-preset-es2015

创建一个转码配置文件.babelrc

{
    "presets": ["es2015"],
    "plugins": []
}

使用命令进行转码

babel src -d dist

此时可以使用 node + dist中的src文件进行编译

Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

#安装
npm install -g webpack webpack-cli
或
npm install -g webpack
npm install -g webpack-cli

编写两个普通js

exports.add=function (a, b) {
    returna+b
}

exports.info=function (str) {
    document.write(str)
}

创建配置文件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'//输出文件
    }
}

执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码打包

webpack --mode=development

测试

在html中引入bundle.js，即可完成测试。

CSS的打包

安装插件

npm install -D style-loader css-loader

修改配置文件

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']
            }  
        ]  
    }
}

Vue开发

在router/index.js中添加需要使用的路由

设置跳转路径

component: () => import('@/views/dashboard/index')

在api文件夹中定义接口路径
在页面中使用axios进行调用，把接口返回的数据在页面中显示。

在router/index.js中添加需要使用的路由

//医院的基本增删改查。
  {
    path: '/hospSet',
    component: Layout,
    redirect: '/hospSet/list',
    name: '医院设置管理',
    meta: { title: '医院设置管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '医院设置列表',
        component: () => import('@/views/hospSet/list'), //设置的跳转路径
        meta: { title: '医院设置列表', icon: 'table' }
      },
      {
        path: 'add',
        name: '医院设置添加',
        component: () => import('@/views/hospSet/add'), //设置的跳转路径
        meta: { title: '医院设置添加', icon: 'tree' }
      }
    ]
  }

在api文件夹中定义接口路径

import request from '@/utils/request'

export default {
  getHospSetList(current,limit,searchObj){
    return request({
      url:`/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`,//通过``代码片段
      method:"POST",
      data:searchObj //使用json进行传递
    })
  }
}

在页面中引入api中的js

<template>
<div></div>
</template>

<script>
    import hospSet from "@/api/hospSet";
    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            //这里存放数据
            return {
                current: 1,
                limit: 3,
                searchObj:{},
                list:[]
            };
        },
        //监听属性 类似于data概念
        computed: {},
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            getList:function(){
                hospSet.getHospSetList(this.current,this.limit,this.searchObj)
                    .then(response=>{
                    console.log(response.data)
                })
                    .catch(response=>{
                    console.log(response)
                })
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            this.getList();
        }
</script>

访问时记得处理跨域问题。

出现如下任何一种情况都会出现跨域问题
- 域名不同
- 访问协议不同
- 端口号不同
简单的解决方法是在Controller类上使用@CrossOrign注解

标签：实战,npm,Node,install,path,js,data
来源： https://www.cnblogs.com/Boerk/p/16147304.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9