【万字长文，netty入门与实战

最新推荐文章于 2023-12-23 12:42:22 发布
最新推荐文章于 2023-12-23 12:42:22 发布
阅读量214 收藏
点赞数
分类专栏： 程序员 文章标签： vue.js html5 javascript 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61453011/article/details/120123618
版权
本文详细介绍了Vue CLI的安装和使用，从创建项目到运行、访问项目，再到项目开发方式，包括Vue Router的配置和Axios的安装及使用。此外，还探讨了Vuex的状态管理模式，讲解了如何在Vue CLI项目中集成Vuex，帮助读者全面掌握Vue前端开发流程。
摘要由CSDN通过智能技术生成 
npm uninstall -g vue-cli  //卸载2.x版本脚手架

1.Vue Cli官方网站

https://cli.vuejs.org/zh/guide/

2.安装vue Cli

npm install -g vue-cli 




#### []( )3、第一个vue脚手架项目



> Vue-cli目录结构



\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2QDNftWz-1627871421740)(Vue实战笔记（三）.assets/image-20210721155403325.png)\\

1.创建vue脚手架第一个项目

vue init webpack 项目名

2.创建第一个项目

hello     ------------->项目名

-build  ------------->用来使用webpack打包使用build依赖  构建一些依赖文件

-config ------------->用来做整个项目配置目录   主要用来对 开发 测试 环境进行配置

-node_modules  ------>用来管理项目中使用依赖

-src					 ------>用来书写vue的源代码[重点]

	+assets      ------>用来存放静态资源 [重点]

  	components   ------>用来书写Vue组件 [重点]

  	router			 ------>用来配置项目中路由[重点]

  	App.vue      ------>项目中根组件[重点]

  	main.js      ------>项目中主入口[重点]

-static        ------>其它静态

-.babelrc      ------> 将es6语法转为es5运行

-.editorconfig ------> 项目编辑配置

-.gitignore    ------> git版本控制忽略文件

-.postcssrc.js ------> 源码相关js

-index.html    ------> 项目主页

-package.json  ------> 类似与pom.xml 依赖管理  jquery 不建议手动修改

-package-lock.json ----> 对package.json加锁

-README.md         ----> 项目说明文件

3.如何运行在项目的根目录中执行

npm run dev 运行前端系统

4.如何访问项目

http://localhost:8080

5.Vue Cli中项目开发方式

 注意: 一切皆组件   一个组件中   js代码  html代码  css样式

 	1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统

 	2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件 




> rc 目录



`src`目录是项目的源码目录，所有代码都会写在这里！



> main.js



项目的入口文件，我们知道所有的程序都会有一个入口

// The Vue build version to load with the import command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from ‘vue’ // 引入VUE核心库

import App from ‘./App’ // 引入一个当前目录下的名字为App.vue的组件

import router from ‘./router’

Vue.config.productionTip = false // 是否要在生产环境当中给予提示功能。

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

router,

components: { App },

template: ‘’

})




*   `import Vue from 'vue'`：ES6 写法，会被转换成 require(“vue”); （require 是 NodeJS 提供的模块加载器）其实就相当于

    

    `<script src = "vue"></script>`

    

*   `import App from './App'` ：意思同上，但是指定了查找路径，./ 为当前目录

    

*   `Vue.config.productionTip = false`：关闭浏览器控制台关于环境的相关提示

    

*   `new Vue({})`：实例化 Vue

    

    *   `el: '#app'`：查找 index.html 中 id 为 app 的元素

    *   `template: '<App/>'`：模板，会将 index.html 中替换为

    *   `components: { App }` ：引入组件，使用的是 import App from ‘./App’ 定义的 App 组件;



> App.vue




<img src="./assets/logo.png">

<h1>自定义脚手架</h1>

<!--展示路由-->

<router-view/>




*   template：HTML 代码模板，会替换 < App /> 中的内容

    

*   export default{…}：导出 NodeJS 对象，作用是可以通过 import 关键字导入

    

    *   name: ‘App’：定义组件的名称

    *   components: { HelloWorld }：定义子组件

*   在hello,Vue中,关于 < style scoped> 的说明：CSS 样式仅在当前组件有效，声明了样式的作用域,是当前的界面私有的! 不加代表全局有效。

    



> index.js 配置路由

import Vue from ‘vue’

import Router from ‘vue-router’

import HelloWorld from ‘@/components/HelloWorld’

Vue.use(Router) //注册路由 new Vue({router,})

export default new Router({

routes: [

{

  path: '/',

  name: 'HelloWorld',

  component: HelloWorld

}

]

})




> HelloWorld.vue







#### []( )4、如何开发Vue脚手架



**注意:在Vue cli 中一切皆组件**



1、我们在HelloWorld.vue的同级目录下新建两个Student和User组件。



![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-liUgTnMu-1627871421742)(Vue实战笔记（三）.assets/image-20210721204921996.png)]](https://img-blog.csdnimg.cn/41464533b7cf4b1a82b403952aaba234.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)



* * *



2、`Student.vue`和`User.vue`组件



`Student.vue`组件




 <h1>hello world {{msg}} </h1>

 <h3>我是学生管理的主页</h3>




`User.vue`组件




 <h1>hello world {{msg}} </h1>

 <h3>我是用户管理的主页</h3>




3、在`App.vue`组件中引入这两个组件的链接，进行路由切换




<img src="./assets/logo.png">

<h1>自定义脚手架</h1>



<router-link to="/">主页</router-link>

<router-link to="/user">用户管理</router-link>

<router-link to="/student">学生管理</router-link>



<!--展示路由-->

<router-view/>




4、启动项目，测试一下



![](https://img-blog.csdnimg.cn/64d34ae67a4241e796493e5a35b48df7.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)



[]( )17、在脚手架中使用axios

----------------------------------------------------------------------------------



### []( )17.1、安装axios

1.安装axios

npm install axios --save

2.配置main.js中引入axios

import axios from 'axios';

Vue.prototype.$http=axios;

3.使用axios

在需要发送异步请求的位置:this.$http.get("url").then((res)=>{}) this.$http.post("url").then((res)=>{}) 




* * *



[]( )18、Vue Cli脚手架项目部署

------------------------------------------------------------------------------------

1.在项目根目录中执行如下命令:

npm run build

注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行

2.打包之后当前项目中变化

在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录 




[]( )19、webstorm开发vue cli项目

-----------------------------------------------------------------------------------------



### []( )19.1、简介



WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。  

![在这里插入图片描述](https://img-blog.csdnimg.cn/b13e104123ae41f9857c0f47d2ea5077.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)



### []( )19.2、安装



官网地址：http://www.jetbrains.com/webstorm/



选择好安装路径



![](https://img-blog.csdnimg.cn/5211f173b1ab4c8588fc09fb1c8c26d1.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)



### []( )19.3、使用webstorm



webstorm和idea同属于一家开发公司，因此使用方式基本一样。



> 使用webstorm初始化项目



1、我们新建一个webstromcodes项目。



2、打开Terminal终端，输入`vue init webpack vue_day5` ，进行`vue-day5`项目的创建。



3、接下来的步骤和使用Vue Cli脚手架开发一样。



4、显示如下页面，项目初始化成功。



![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aCUzAuOB-1627871421744)(Vue实战笔记（三）.assets/image-20210722212053257.png)]](https://img-blog.csdnimg.cn/549231dbd2db4cb3b7db8333b59b8ace.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)



可以看下目录结构，和使用Vue CLI脚手架开发目录结构一致。



![](https://img-blog.csdnimg.cn/59310520ed554033ba087720cd49004d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)



5、在Terminal终端输入`cd vue_day5`，进入当前项目根目录，项目目录中包含`package.json`才是根目录，可以输入`dir`查看当前目录结构。



6、最后我们输入`npm run dev`启动项目，出现如下界面：



![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-83zniwev-1627871421745)(Vue实战笔记（三）.assets/image-20210722212849013.png)]](https://img-blog.csdnimg.cn/a20796d293d24a1c9bf6421a37954341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)



说明项目成功运行！！！输入http://localhost:8080 ，打开浏览器查看一下，出现默认界面。



> main.js 项目中主入口

//引入vue.js

import Vue from ‘vue’

//引入app.vue 组件

import App from ‘./App’

//引入router目录中 /index.js

import router from ‘./router’

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: ‘#app’, //指定vue实例作用范围

router,

components: { App },

template: ‘’

})




### []( )19.4、开发vue cli项目(一)



**1、Student组件**

template>

<h1>{{ msg }}</h1>




**4、index.js**

import Vue from ‘vue’

import Router from ‘vue-router’

//@ 代表src目录

import HelloWorld from ‘@/components/HelloWorld’

import User from ‘@/components/User’

import Student from “…/components/Student”;

Vue.use(Router)

export default new Router({

routes: [

{

  path: '/',

  name: 'HelloWorld',

  component: HelloWorld

},

{

  path: '/user',

  name: 'user',

  component: User

},{

  path: '/student',

  name: 'student',

  component: Student

}

]

})




启动项目测试一下：



![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ylfeDATy-1627871421747)(Vue实战笔记（三）.assets/image-20210724091247957.png)]](https://img-blog.csdnimg.cn/66afcbc7e6e04ff8916f7e9ce53aeb97.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTI4NQ==,size_16,color_FFFFFF,t_70)



成功查询到数据！！！



### []( )19.5、开发vue cli项目(二)



[]( )20、VueX 状态管理

-------------------------------------------------------------------------------



### []( )20.1、简介&安装

1.简介

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

2.安装vuex

  • npm install vuex --save

3.创建vue cli中创建store文件夹

4.在stroe中创建index.js文件


import Vue from 'vue'

import Vuex from 'vuex'

//1.安装vuex

Vue.use(Vuex);

//2.创建store对象

const store = new Vuex.Store({

  

});

//3.暴露store对象

export default store;

5.在main.js中引入stroe并注册到vue实例


import Vue from 'vue'

import App from './App'

import router from './router'



# 最后

各位读者，由于本篇幅度过长，为了避免影响阅读体验，下面我就大概概括了整理了

**[CodeChina开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】](https://codechina.csdn.net/m0_60958482/java-p7)**

![](https://img-blog.csdnimg.cn/img_convert/b4d05fe6c4e6c4644885b688cc4b83d8.png)

![](https://img-blog.csdnimg.cn/img_convert/f60c07bf77518209bac3e83d62417a5e.png)

![](https://img-blog.csdnimg.cn/img_convert/fc5eead9998a8146314eba0c437ed046.png)

t_70)



成功查询到数据！！！



### []( )19.5、开发vue cli项目(二)



[]( )20、VueX 状态管理

-------------------------------------------------------------------------------



### []( )20.1、简介&安装



```

# 1.简介

- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化



# 2.安装vuex

-	npm install vuex --save



# 3.创建vue cli中创建store文件夹



# 4.在stroe中创建index.js文件

import Vue from ‘vue’

import Vuex from ‘vuex’

//1.安装vuex

Vue.use(Vuex);

//2.创建store对象

const store = new Vuex.Store({

});

//3.暴露store对象

export default store;


# 5.在main.js中引入stroe并注册到vue实例

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

最后

各位读者，由于本篇幅度过长，为了避免影响阅读体验，下面我就大概概括了整理了

CodeChina开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】

[外链图片转存中…(img-2UBTQnjD-1630855215051)]

[外链图片转存中…(img-G2NwikIs-1630855215053)]

[外链图片转存中…(img-roZsWj8W-1630855215054)]

Java音乐盒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分布式架构之Netty入门与实战
真是呆子啊的博客
08-16 848
一、初探 1、Reactor模型 Reactor是反应堆的意思，Reactor模型，是指通过一个或多个输入同时传递给服务处理器的服务请求的事件驱动处理模式。Reactor模式也叫Dispatcher模式，即I/O多了复用统一监听事件，收到事件后分发(Dispatch给某进程)，是编写高性能网络服务器的必备技术之一，关键两个组成 Reactor Reactor在一个单独的线程中运行，负责...
Netty 入门与实战
12-04
Netty 入门与实战
Netty入门与实战
外星喵的博客
11-15 542
Netty是一个高性能事件驱动的异步的非堵塞的IO(NIO)网络应用程序框架和工具，基于Netty可以建立高性能的Http服务器。支持HTTP、 WebSocket 、Protobuf、 TCP 和UDP等协议。 通过借助Netty，你可以很容易的自己去实现HTTP、FTP、UDP、RPC、WebSocket、Redis的Proxy、MySQL的Proxy服务器等等。
一文弄懂-Netty核心功能及线程模型
DaySurprise的博客
01-30 426
一. Netty是什么? 我们在学完NIO发现很多问题,它的API和类库比较繁杂，使用麻烦，需要熟练掌握Selector,ServerSocketChannel,SocketChannel,ByteBuffer等，而且有很多问题需要我们手动编程去解决，比如客户端的断线重连，网络闪断，心跳处理，半包读写，网络拥塞和异常流的处理等等 Netty就帮助我们解决了上面的问题,Netty是对JDK自带的NIO的API良好的封装，Netty拥有高性能，吞吐量更高，延迟更低，减少资源消耗，最小化不必要...
Netty入门与实战教程
EverythingAtOnce的博客
12-23 2126
Netty是一个基于Java的高性能、异步事件驱动的网络应用程序框架，专注于快速开发可维护、高性能、可扩展的网络服务器和客户端。它提供了一组易于使用的API，用于处理网络通信，使开发人员能够轻松地构建各种类型的网络应用程序。官网：Netty: Home异步事件驱动：采用异步、基于事件驱动的模型，实现高效的并发处理。高性能：通过精心设计和优化，提供了出色的性能和吞吐量。易于使用：提供简洁、直观的API和丰富的文档，使开发人员能够轻松上手。可扩展性：支持用户自定义的扩展和定制，适应各种不同的应用场景。
万字长文解密苹果A12芯片
01-19
虽然近节点的名称与实际物理尺寸之间的关联早已失去了意义，但它仍代表密度的飞跃，因此，供应商能够在相同的芯片空间中封装更多的晶体管。 　本文中，我再次回顾了A12芯片，我写下了我自己定义的关于裸片照片的...
万字长文详解大数据流式计算框架 Flink 实战（中篇）1
08-03
《万字长文详解大数据流式计算框架 Flink 实战（中篇）》是一篇深入探讨 Flink 流处理框架的教程，旨在帮助读者理解 Flink 的核心概念、API 使用、窗口与水印机制、状态管理和容错机制。本文将详细解析其中的关键...
万字长文带你入门无人驾驶车硬件 硬件工程师电路分析物联网模电单片机嵌入式技术.doc
09-22
《万字长文带你入门无人驾驶车硬件》 无人驾驶汽车，作为现代科技的前沿产物，集成了新能源技术、通信技术、物联网、硬件工程师的专业知识以及单片机和嵌入式技术等多个领域的精华。本文旨在深入剖析无人驾驶车的...
万字长文：支付总架构解析
最新发布
04-03
万字长文：支付总架构解析
《万字长文带你解读AIGC》系列之入门篇.pdf
12-17
"《万字长文带你解读AIGC》系列之入门篇" 本文旨在提供对AIGC（ Artificial Intelligence-Generated Content，人工智能生成内容）的初步了解，从技术到应用，以填补当前相关知识的空白。AIGC作为当前最火热的投资...
Netty入门与实战：仿写微信IM即时通讯系统
01-12
Netty实现IM通讯
Netty 入门与实战：仿写微信 IM 即时通讯系统.zip
02-26
Netty 入门与实战：仿写微信 IM 即时通讯系统
Netty 入门与实战：仿写微信 IM 即时通讯系统.pdf
06-12
Netty 入门与实战：仿写微信 IM 即时通讯系统
Netty 入门与实战.zip（绝对易懂，评论见）
08-03
作为一个学 Java 的，如果没有研究过 Netty，那么你对 Java 语言的使用和理解仅仅停留在表面水平，如果你要进阶，想了解 Java 服务器的深层高阶知识，Netty 绝对是一个必须要过的门槛。
Netty+入门与实战：仿写微信+IM+即时通讯系统.rar
08-16
掘金小册 Netty 入门与实战：仿写微信 IM 即时通讯系统，自己就是用这个来学习的，分章节的html版本，还不错
Netty 入门实战
July_whj
04-27 364
打算
Netty入门实战
LeeWei
07-11 391
Netty入门实战 新建工程 添加maven依赖 https://mvnrepository.com <!-- https://mvnrepository.com/artifact/io.netty/netty-all --> <dependency> <groupId>io.netty</groupId> <artifactId>netty-all</artifactId> <version&g
Netty学习（一）- Netty入门与Netty应用实战
noaman_wgs的博客
07-11 2149
一、什么是Netty Netty官网上是这样定义Netty的： Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. 用人话（Google翻...
Netty 入门与实战：仿写微信 IM 即时通讯系统
weixin_33937913的博客
10-19 645
2019独角兽企业重金招聘Python工程师标准>>> ...
Python重点全解析：万字长文详解与新特性概览
本文档深入探讨了Python语言的重点知识，...通过这份详尽的万字长文，读者能够全面了解Python语言的核心特性，掌握从基础语法到高级特性的迁移和应用技巧。无论是初学者还是经验丰富的开发人员，都可以从中受益良多。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值