新手村的试炼,基于Vue2达成的仿手提式无线电话机QQ单页面应用

By admin in 4858美高梅 on 2019年3月31日

 一、前言

 一、前言

关于 DncZeus

DncZeus = Dnc + Zeus

“Dnc”–.Net Core 的缩写;

“Zeus”–汉语译为宙斯,是古希腊共和国(The Republic of Greece)神话中的众神之王,奥林匹斯十二主神之首,统治宇宙万物的一级的主神(在古希腊共和国(Ελληνική Δημοκρατία)神话中主神专指宙斯),人们常用“众神和人类的老爸”、“神王”来称呼他,是希腊共和国(The Republic of Greece)好玩的事诸神中最宏伟的神。

DncZeus的愿景正是做一个.NET Core
领域的回顾精致的通用后台权限管理模板系统基础框架,努力向.NET Core
领域的”宙斯”看齐。

DncZeus是1个基于 ASP.NET Core 2 + Vue.js
的前后端分离的通用后台管理体系框架。后端使用.NET Core 2 + Entity
Framework Core 创设,UI 则是现阶段流行的遵照 Vue.js 的
iView。项目完毕了上下端的动态权限管控以及基于 JWT
的用户令牌认证机制,让左右端的交互更通畅。

DncZeus并不是一个全部的工作种类,但他提供成功业务系统的大部付出意况,让每1人.NET
开发者都能依据DncZeus高效支付出相互、体验以及功用具佳的.NET Core
单页应用程序。

倘使你以为DncZeus对你依然客人有用,请为DncZeus点个赞,求扩散,让更多少人拿走救助!!!

极品质量管理理理员:administrator管理员:admin

密码:111111

地址:

新手村的试炼,基于Vue2达成的仿手提式无线电话机QQ单页面应用。是因为是私家项目,资金有限,体验服是低配,请大家保护,轻戳,不胜多谢!!!

由于 DncZeus 考虑到初级.NET
开发者都足以行使,所以往端项目未涉嫌过多架构和包裹,但为了你更好地理解和采用DncZeus,你要求理解:

  • ASP.NET Core
  • Vue.js
  • iView

ASP.NET Core 的知识能确定保障您能够看懂和精通后端是怎样促成和劳作的,而
Vue.js 框架则是前者实现的内核,当然 iView 这些基于 Vue.js 的 UI
框架也是必须求询问的,因为 DncZeus 就是基于 iview-admin(iView
的3个后台管理体系示范项目)来落到实处的前端 UI 交互。

若果您对这多少个地点的文化还不纯熟,提议你能够先读书有些争持再来运用
DncZeus 那些框架。关于 ASP.NET Core 和 Vue.js 的入门请参见:

  • ASP.NET Core 官方文书档案
  • Vue.js 官方文书档案
  1. Node.js(同时设置 npm 前端包管理工科具)
  2. Visual Studio 2017(15.8.8 照旧以上版本)
  3. VS Code 或然其余前端开发工具
  4. git 管理工科具
  5. SQL Server CE 或者 SQL Server Express 或者 SQL Server 2014 +
  • ASP.NET Core 2(.NET Core 2.1.502)
  • ASP.NET WebApi Core
  • JWT 令牌认证
  • AutoMapper
  • Entity Framework Core 2.0
  • .NET Core 正视注入
  • Swagger UI
  • Vue.js
  • iView(基于 Vue.js 的 UI 框架)

运用Vue2进行的仿手提式无线电话机QQ的webapp的炮制,小说由个体独立开发,源码中进行了详尽的申明。
由于投机也是初学Vue2,所以注释写的不够精简,请见谅。

  biu biu
biu,从上家辞职后,在复习着.NET的连锁知识点,准备着面试。同时呢也学着使用ASP.NET
Core 2.0
WebAPI和Vue.js搭建一个上下端分离的档次,嗯,都是从前从未接触过,正在现学这几个东西。因为根本照旧会好感于后端,所以或许前端的东西不会看的很中肯,假若有错误的地方,请提议,见谅见谅~~~

  初入Vue.js的新世界,总归是要通晓些涉及到的新定义。菜鸟诞生的首先课,开眼看看Vue的新世界~~~

行使Git工具下载

先是请确定保障您本地开发环境已安装了git管理工科具,然后在急需寄放本项目标目录打开git命令行工具Git
Bash Here
,在命令行中输入如下命令:

git clone https://github.com/lampo1024/DncZeus.git

以上命令就把DncZeus的长距离代码拉取到您的本土开发机上。

项目地址 https://github.com/jiangqizheng/vue-MiniQQ

 贰 、打怪升级

  学习种类目录地址:

手动下载

一旦你不情愿利用git管理工科具下载DncZeus的长途代码,你也能够在github托管地址手动下载,打开地址
or download”,如下图示:

4858美高梅 1手动下载DncZeus

在弹出的对话框中式点心击按钮”Download
ZIP”即可初始下载DncZeus的源代码,如下图:

4858美高梅 2手动下载DncZeus源代码

 

  • 一 、菜鸟的出生
    1. 新手村的试炼
      – 初见Vue新世界(概念)
    2. 新手村的试炼
      – 新世界的器械(指令)
    3. 新手村的试炼
      – 新世界的法术(事件修饰符)
  • 二、

  仓库储存地址:

前者项目

在将DncZeus的源代码下载到本地之后,如若你使用的git管理工科具,能够不用退出当前的git管理工科具,输入如下命令:

cd DncZeus/DncZeus.App

进去到DncZeus的前端项目目录DncZeus.App。在命令行中输入如下命令进行前端信赖包的回复操作:

npm install

或者

npm i

– 项目已落到实处际效果益

-   对话功能——想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话。

-   左滑删除——左滑删除相关消息。

-   搜索页面——点击右上角搜索按钮,能够进入搜索页面,输入对应的单词或者数字,动态查找好友。

-   项目中数据流动由vuex进行控制

  注:对于那句`Flux 架构就像眼镜:您自会知道什么时候需要它。`感觉好像懂了点什么。
  • 4858美高梅,动态图预览

  侧边栏及个人主页

  4858美高梅 3

 

 

  滑动删除

  4858美高梅 4

  与机器人举行对话

  4858美高梅 5

  搜索界面

  4858美高梅 6

  tab键切换页面,全部ui

  4858美高梅 7

 

 三 、地址链接

 二 、打怪升级

后端项目

在Visual Studio中开辟消除方案[DncZeus.sln]。首先遵照本人的支付环境(SQL
Server数据库类型,本示例默许是SQL Server
Localdb)修改配置文件appsettings.json中的数据库连接字符串,示例暗中认可连接字符串为:

"ConnectionStrings": { "DefaultConnection": "Server=\\mssqllocaldb;Database=DncZeus;Trusted_Connection=True;MultipleActiveResultSets=true" }

再打开包管控台(Package Manager
Console),执行如下命令生成数据库表结构:

Update-Database -verbose

最后,打开项目根目录中的脚本文件夹[Scripts],执行脚本文件[Init_data.sql]以初步化系统数据。

恭喜你,到这边有着的备选干活就完了了。

尽快体验DncZeus框架吧!!!

  1. 行使Visual
    Studio开发工具打开DncZeus根目录中的VS解决方案文件[DncZeus.sln](或然你欢悦的话,使用VS
    Code来实行ASP.NET
    Core的开发也是足以的),设置DncZeus.Api项目为私下认可运维项并运维此项目。

那时候在浏览器中开拓地址:
,便能够查看到DncZeus已经完结的后端API接口服务了。

  1. 在命令行中进入到DncZeus的前端项目目录[DncZeus.App],运营如下命令以运转前端项目服务:

npm run dev

成功运转后会自动在浏览器中开拓地址:

DncZeus项目是三个开源项目,你能够平素基于本项目展开扩充或许三次开发,也能够修改当中的代码。

但请保留最初的小说件中的版权音信,尊重本人的劳动成果,违者必究,感激合营

赶上标题咋办?

  • 直白付出issue
  • QQ群:483350228
  • 码友网

  技术栈

    •   vue-cli
    •   vue2
    •   vue-router
    •   vuex
    •   axios
    •   stylus
    •   webpack2
    •   muse-ui

  

  • Vue 官网地址:
  • 学学记录存款和储蓄地址:

  1、 Vue.js是什么?

  其余验证

    •   由于是抱着边写边学的情怀,所以或然会冒出些不小心谨慎的地点,或许显然的荒唐,关于那一点,看到请举报给自家,13分多谢。

    •   从零到当下的进程,纵然功能不难,但仍然费用了成都百货上千年华,把品种上传是希望能够对有的同样正在上学Vue的伴儿有一对帮助。

    •   由于是首先次独自的写较为完整的Vue项目,所以指望大家给个Star!
      Q.o,并且欢迎钻探。

      最终,项目地址 https://github.com/jiangqizheng/vue-MiniQQ

      欢迎沟通,希望能对vue学习中的小伙伴有肯定的借鉴意义,由于是作者首先次写较复杂的私家项目,所以代码有不周详的地点请见谅,最近项目正在更新中,能够不断关心进程哦。

  Vue (读音 /vjuː/,类似于 view)
是一套用于营造用户界面包车型地铁渐进式框架,只关怀于视图层。在Vue的官网中大家得以望见,对于渐进式框架那一个词,笔者是加粗表示的,根据小编的安排,Vue包蕴了当代前端框架所必须的剧情,可是你并不要求一初阶就把具有的东西都用上,这一个都是可选的。

  对于Vue的解释,推荐简书上的一篇小说,小说地址:  

  贰 、 使用Vue.js后与守旧的前端开发方式有什么不一样?

  在观念的前端开发中,为了完毕有个别职务,大家需求利用 JS/Jquery
获取到成分的DOM成分,随后对得到到的DOM元素举办操作。而当大家选取Vue实行前端开发后,对于DOM的具有操作全体交由Vue来处理,大家只需求关爱于事情代码的兑现就足以了。

  三 、 怎样运用Vue.js?

  3.一 、使用 script
标签引用Vue.js(那里能够在Vue的官网上下载好js文件后采纳标签引入,也得以行使cdn的花样引入)

  <script  src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

  3.二 、使用 Vue-cli
营造单页应用(需求先在电脑中设置好node.js环境才可利用)

  //1、全局安装Vue-Cli
  npm install -g vue-cli
  //2、进入创建项目目录下
  //3、创建使用webpack模板的Vue单页应用,Enter后根据提示完成项目的创建
  vue init webpack projectname
  //4、进入项目目录下
  //5、下载项目引用的包
  npm install
  //6、运行项目
  npm run dev

  4、 MVC与MVVM

  4.① 、MVC(Model-View-Controller):是一种表现形式(UI / Presentation
帕特tern),它将软件的UI部分的设计拆分成三个基本点单元,分别是Model、View和Controller。MVC核心是控制器,它担负处理浏览器传送过来的具有请求,并决定要将何以内容响应给浏览器。

  Model:模型,用于存款和储蓄数据的零部件;

  View:视图,遵照Model数据举办内容展现的零部件;

  Controller:控制器,接受并处理用户指令,并回到内容

  4.二 、MVVM(Model-View-ViewModel):MVVM的基本是ViewModel,它提供了对于Model和ViewModel的双向数据绑定,通过ViewModel连接View和Model,确定保障视图与数据的一致性,而以此进程是框架自动实现的,无需手动干预。

4858美高梅 8

  图片版权表明:由Ugaya40

  • 团结的小说,CC BY-SA
    3.0,链接

 三、总结

  这一章大家主要学习了一些 vue
涉及到的一些定义,在后边的学习中,也会稳步往本篇文章中内部添加用到的学问,文章开始处提供仓库储存地址里会将波及到的知识点的汇总成1个markdown文书档案,希望多多关心啊,嘻嘻。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有