2. 程式人生 > >.net core + vue開發單頁應用（二）

.net core + vue開發單頁應用（二）

阿新 • • 發佈：2019-01-27

修改入口main.js

在入口函式中新增對element-ui,vue-router,vuex,vue-source等元件的引用

  1. importVuefrom'vue'
  2. importAppfrom'./App'
  3. importElementUIfrom'element-ui'
  4. import'element-ui/lib/theme-default/index.css'
  5. importVueRouterfrom'vue-router'
  6. import store from'./vuex/store'
  7. importVuexfrom'vuex'
  8. importVueSourcefrom'vue-resource'
  9. import
     
     routes from'./routes'
  10. import'font-awesome/css/font-awesome.min.css'
  11. Vue.use(ElementUI)
  12. Vue.use(VueRouter)
  13. Vue.use(Vuex)
  14. Vue.use(VueSource)
  15. //建立路由例項
  16. const router =newVueRouter({
  17.     routes
  18. })
  19. router.beforeEach((to,from,next)=>{
  20. //這裡進行了簡單的登入驗證
  21. //訪問login時直接清除user
  22. if(to.path =='/login'){
  23.         sessionStorage.removeItem('user'
     
    );
  24. }
  25. let user = JSON.parse(sessionStorage.getItem('user'));
  26. if(!user && to.path !='/login'){
  27. next({ path:'/login'})
  28. }else{
  29. next()
  30. }
  31. })
  32. newVue({
  33.     router,
  34.     store,
  35.     render: h => h(App)
  36. }).$mount('#app')

修改App.vue

  1. <template>
  2. <divid="app">
  3. <transitionname="fade"
  4. mode="out-in">
  5. <router-view></router-view>
     
  6. </transition>
  7. </div>
  8. </template>
  9. <script>
  10. exportdefault{
  11.         name:'app',
  12.         components:{
  13. }
  14. }
  15. </script>

增加viewes資料夾，並增加模組檢視

login.vue

  1. <template>
  2. <el-form :model="ruleForm2" :rules="rules2"ref="ruleForm2"label-position="left"label-width="0px"class="demo-ruleForm login-container">
  3. <h3class="title">系統登入</h3>
  4. <el-form-itemprop="account">
  5. <el-inputtype="text"v-model="ruleForm2.account"auto-complete="off"placeholder="賬號"></el-input>
  6. </el-form-item>
  7. <el-form-itemprop="checkPass">
  8. <el-inputtype="password"v-model="ruleForm2.checkPass"auto-complete="off"placeholder="密碼"></el-input>
  9. </el-form-item>
  10. <el-checkboxv-model="checked"checkedclass="remember">記住密碼</el-checkbox>
  11. <el-form-itemstyle="width:100%;">
  12. <el-buttontype="primary"style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登入</el-button>
  13. </el-form-item>
  14. </el-form>
  15. </template>
  16. <script>
  17. exportdefault{
  18.         data(){
  19. return{
  20.                 logining:false,
  21.                 ruleForm2:{
  22.                     account:'admin',
  23.                     checkPass:'123456'
  24. },
  25.                 rules2:{
  26.                     account:[
  27. { required:true, message:'請輸入賬號', trigger:'blur'},
  28. //{ validator: validaePass }
  29. ],
  30.                     checkPass:[
  31. { required:true, message:'請輸入密碼', trigger:'blur'},
  32. //{ validator: validaePass2 }
  33. ]
  34. },
  35.                 checked
            
      
    
           
    
              
              
    
            
    
            
    相關推薦
    
			   
            
            
            
 

    

    
    
    
    .net core + vue開發單頁應用（二）
    
     
     
                


修改入口main.js

在入口函式中新增對element-ui,vue-router,vuex,vue-source等元件的引用
importVuefrom'vue'importAppfrom'./App'importElementUIfrom'eleme 
    

    
  
 

    

    
    
    
    .net core + vue開發單頁應用（一）
    
     
     
                

背景

.net core 與 vue 的簡介不再贅述，目前使用vue開發基本分為幾種情況：
使用webpack進行純前端開發傳統的web應用中使用vue，主要使用vue的物件模型繫結
對於使用傳統的web+vue進行單頁面應用開的幾乎沒有找到例子，因此決定自己動手嘗試， 
    

    
  
 

    

    
    
    
    VUE 爬坑之旅-- 從零開始一步一步構建 VUE 單頁應用（二）
    
     
     
							
							
							上篇  從零開始一步一步構建 VUE 單頁應用（一） 對單頁應用做了簡單的介紹並建立了一個單頁應用的模版。這篇就先來看看這個專案的檔案結構，然後再看看要怎麼修改才能實現我們自己的頁面。



檔案結構



用官方的 vue-cli 生成的專案檔案結構如上圖所示 
    

    
  
 

    

    
    
    
    asp.net core mcroservices 架構之 分散式日誌（二）之自定義日誌開發
    
     
     一   netcore日誌原理                                    &nbs 
    

    
  
 

    

    
    
    
    .Net Core微服務入門全紀錄（二）——Consul-服務註冊與發現（上）
    
     
     # 前言
上一篇【[.Net Core微服務入門全紀錄（一）——專案搭建](https://www.cnblogs.com/xhznl/p/13071260.html)】講到要做到服務的靈活伸縮，那麼需要有一種機制來實現它，這個機制就是服務註冊與發現。當然這也並不是必要的，如果你的服務例項很少，並且很穩定，那 
    

    
  
 

    

    
    
    
    用ASP.NET Core MVC 和 EF Core 構建Web應用 （二）
    
     
     work   nal   nta   多個   包括   catch   web 應用   自動   選項卡   本節學習如何執行基本的 CRUD （創建、 讀取、 更新、 刪除） 操作。
自定義“詳細信息”頁
學生索引頁的基架代碼省略了 Enrollments 屬性，因為該屬性包含一個集合。 在“詳細信息” 
    

    
  
 

    

    
    
    
    vue 單頁應用（spa）前端路由實現原理
    
     
      
 
 寫在前面：通常 SPA 中前端路由有2種實現方式： 
  
  
   window.history 
   location.hash 
  
  
 下面就來介紹下這兩種方式具體怎麼實現的 
 一.history 
 1.history基本介紹 
 window.history 物件包含瀏覽器的 
    

    
  
 

    

    
    
    
    手把手教你用vue-cli、webpack、vue-router、vue-resource構建單頁應用（SPA）
    
     
     
							
							
							vue-cli webpack vue-router vue-resource




vue-cli:一個官方釋出 vue.js 專案腳手架，使用 vue-cli 可以快速建立 vue 專案
webpack:是當下最熱門的前端資源模組化管理和打包工具。它可以將 
    

    
  
 

    

    
    
    
    Vue+webpack構建單頁router應用（二）
    
     
     
							
							
							巢狀路由

其實很簡單，主要是vue2.0有一些變更。 
所以要多看API文件，少看網上的教程 = =



配置路由

配置路由，這裡為Home配置了兩個子路由news和message

const routes = [{
    path: '/Hello' 
    

    
  
 

    

    
    
    
    詳解vue 單頁應用（spa）前端路由實現原理
    
     
     
                寫在前面：通常 SPA 中前端路由有2種實現方式：window.historylocation.hash下面就來介紹下這兩種方式具體怎麼實現的一.history1.history基本介紹window.history 物件包含瀏覽器的歷史，window.history 物件在編 
    

    
  
 

    

    
    
    
    ASP.NET Core 一步步搭建個人網站（7）_Linux系統移植
    
     
     window   std   bce   stat   能夠   rpm   設置   with   err   摘要
考慮我們為什麽要選擇.NET Core？
因為它面向的是高性能服務器開發，拋卻了 AspNet 的臃腫組件，非常輕量，加上微軟的跨平臺戰略，對 Docker 的親和性，對於開發人員也非常友好 
    

    
  
 

    

    
    
    
    Asp.Net Core 2.0 項目實戰（6）Redis配置、封裝幫助類RedisHelper及使用實例
    
     
     命名   redis數據庫   remove   per   chang   open   htm   lazy   鏈接   
本文目錄
	1. 摘要
	2. Redis配置

	3. RedisHelper
4．使用實例	
	5. 總結
	
	




1.  摘要
　　由於內存存取速度遠高於磁盤讀取的特 
    

    
  
 

    

    
    
    
    Asp.Net Core 2.0 項目實戰（2）NCMVC一個基於Net Core2.0搭建的角色權限管理開發框架
    
     
     ML   用戶   解密   https   redis   json   uil   AI   不足   
本文目錄
	1. 摘要
	2. 框架介紹 

	3. 權限管理之多一點說明
	4. 總結
	










1.  摘要
　　NCMVC角色權限管理框架是由最近練習Net Core時抽時間整理的 
    

    
  
 

    

    
    
    
    .Net Core 商城微服務專案系列（五）：使用Polly處理服務錯誤
    
     
     專案進行微服務化之後，隨之而來的問題就是服務呼叫過程中發生錯誤、超時等問題的時候我們該怎麼處理，比如因為網路的瞬時問題導致服務超時，這在我本人所在公司的專案裡是很常見的問題，當發生請求超時問題的時候，我們希望能夠自動重試，或者是在發生服務錯誤時採取一定的策略，比如限流熔斷等等。 
本篇將會使用Polly處理服 
    

    
  
 

    

    
    
    
    .Net Core 商城微服務專案系列（一）：使用IdentityServer4構建基礎登入驗證
    
     
     這裡第一次搭建，所以IdentityServer端比較簡單，後期再進行完善。 
1.新建API專案MI.Service.Identity,NuGet引用IdentityServer4,新增類InMemoryConfiguration用於配置api和客戶端資源： 
 
 public class InMemor 
    

    
  
 

    

    
    
    
    ASP.NET Core MVC 和 Visual Studio入門（五） 使用 SQL Server LocalDB
    
     
      
 
 ASP.NET Core MVC 和 Visual Studio入門（五）   使用 SQL Server LocalDB 
 Rick Anderson 
   
   
 MvcMovieContext物件操縱連線到資料庫並對映電影物件到資料庫記 
    

    
  
 

    

    
    
    
    ASP.NET Core MVC 和 Visual Studio入門（四）新增模型
    
     
      
 
 ASP.NET Core MVC 和 Visual Studio入門（四）新增模型 
   
 Rick Anderson 和Tom Dykstra 
   
 在要節中將新增一些在資料庫中管理電影的類,這些類將成為MVC應用的“Model(模型)”部分。 
 這些類將與Enti 
    

    
  
 

    

    
    
    
    ASP.NET Core MVC 和 Visual Studio入門（三） 新增檢視
    
     
      
 
 ASP.NET Core MVC 和 Visual Studio入門（三）   新增檢視 
  
 本節將修改HelloWorldController類，從而使用Razor檢視模板來乾淨利索地封裝產生一個HTML迴應給客戶端的過程。 
 我們將使用Razor建立一個檢視模板,基於 
    

    
  
 

    

    
    
    
    .Net Core使用 MiniProfiler 進行效能分析（轉）
    
     
     轉自：http://www.cnblogs.com/ideacore/p/9505425.html 
官方文件： https://miniprofiler.com/dotnet/AspDotNetCore 
1、新增包 MiniProfiler.AspNetCore.Mvc  & 
    

    
  
 

    

    
    
    
    axios在vue中的應用（二）—— 表單提交上傳圖片
    
     
      
 
 使用axios實現圖片預覽、圖片上傳等功能： 
 methods: {
    // 圖片預覽
    priviewImg(e) {
        // ...
    },
    // 提交表單
    sumitRefund() {
        let fd = new FormDat