tomcat如何部署.net程序_.NET 程序员如何学习Vue
之所以取這個標題，是因為本文來自內部培訓的整理，培訓的對象是公司的 .NET 程序員，.NET 程序員學習 Vue 是為了在項目中做二次開發(fā)時能夠更好地跟產(chǎn)品對接。
Vue 是現(xiàn)在比較流行的前端框架，也是非常容易入門的前端框架，花幾個小時看看官方文檔基本就入門，如果連官方文檔都懶得看，那本文或許對您有所幫助。
開發(fā)一個站點最基本的知識點，我認為有以下幾個：
頁面組裝
頁面跳轉
頁面?zhèn)髦?/p>
接口調用
.NET 程序員通常會采用 Asp.Net 或 Asp.Net MVC 來開發(fā)網(wǎng)站，對于上面四點，在 .NET 中的對應關系如下：
| 頁面組裝 | Aspx頁面、用戶控件、MasterPage | 視圖、分部視圖 |
| 頁面跳轉 | 鏈接、Redirect | 路由 |
| 頁面?zhèn)髦?/td> | QueryString、Session等 | ViewBag、ViewData等 |
| 接口調用 | Ajax | Ajax |
在 Vue 中、使用「組件」來組裝頁面，使用「路由」來做頁面的跳轉，傳值分為「路由參數(shù)」和「組件之間的通訊」，接口的調用使用官方推薦的「axios」。
下面以一個簡單的登錄示例來講解上面說到的一些知識點。
環(huán)境安裝
首先安裝 nodejs ,可以在http://nodejs.cn/download/找到相關的版本進行安裝。
Vue的使用有兩種模式，直接引用 Vue 的 js 文件，或者使用腳手架生成完整的項目框架，這里我們使用腳手架的方式，使用下面命令進行安裝
npm?install?-g?@vue/cli創(chuàng)建應用
使用下面命令創(chuàng)建名為 hello-world 的應用
vue?create?hello-worldVue 創(chuàng)建應用時分為默認模式和手動模式，這里我們選擇默認模式
創(chuàng)建完成后，項目的目錄結構如下
public：public中的靜態(tài)資源會復制到最終打包的dist目錄中
src：編寫代碼主要要操作的目錄
src/assets：存放靜態(tài)資源，如圖片、字體等
src/components：組件目錄
src/App.vue：根組件
src/main.js：入口文件
下面的一些配置文件可以暫時不做深入研究
運行應用
在命令行輸入npm run serve，運行起來后，在瀏覽器中輸入http://localhost:8080,就可以訪問站點了。
作為一個.NET程序員，本機通常安裝有IIS，在IIS中可能有站點將8080端口占用了，這時就需要指定端口的方式來啟動
.\node_modules\.bin\vue-cli-service?serve?–port?4000一個簡單的登錄示例
安裝 ElementUI
npm?i?element-ui?-S安裝完成后在 main.js 中進行引用
import?Element?from?'element-ui';import?'element-ui/lib/theme-chalk/index.css';
Vue.use(Element,?{?size:?'small',?zIndex:?3000?});
添加 login.vue 組件
在 components 目錄中添加 login.vue 組件文件，代碼如下：
<template>??<el-form?ref="ruleForm"?:model="formModel">
????<p?class="title">登錄p>
????<el-form-item?required>
??????<el-input?v-model="formModel.loginName"?placeholder="請輸入登錄名"?size="large">el-input>
????el-form-item>
????<el-form-item?required>
??????<el-inputtype="password"v-model="formModel.password"
????????@keyup.native="keyup"placeholder="請輸入登錄密碼"size="large"
??????>el-input>
????el-form-item>
????<p?v-show="showErrorMessage"?class="alert">{{?errorMessage?}}p>
????<el-form-item>
??????<el-button?type="primary"?size="medium"?@click="login"?style="width:?100%;">登錄el-button>
????el-form-item>
??el-form>
template>
<script>export?default?{name:?"login",
??data()?{return?{errorMessage:?"",formModel:?{loginName:?"",password:?""
??????}
????};
??},watch:?{"formModel.password":?function(val)?{if?(val.trim()?!==?"")?{this.errorMessage?=?"";
??????}?else?{this.errorMessage?=?"請輸入密碼";
??????}
????}
??},computed:?{
????showErrorMessage()?{return?this.errorMessage?!==?"";
????}
??},mounted:?function()?{},methods:?{
????keyup(event)?{if?(event.keyCode?===?13)?{this.login();
??????}
????},
????login()?{const?loginName?=?this.formModel.loginName;const?password?=?this.formModel.password;if?(loginName?===?"")?{this.errorMessage?=?"請輸入登錄名";return;
??????}if?(password?===?"")?{this.errorMessage?=?"請輸入密碼";return;
??????}//調用接口驗證
????}
??}
};script>
<style?scoped>style>
data()：組件中使用到的數(shù)據(jù)需要以對象的方式在 data() 函數(shù)中返回
watch：監(jiān)聽屬性，上面例子中監(jiān)聽 formModel.password 的值，當改變時，修改 errorMessage
computed：計算屬性，例子中當 errorMessage 的值從空變成非空，或者從非空變成空時才會觸發(fā)
mounted：頁面加載完成后執(zhí)行，如果登錄組件想要請求接口設置一個背景圖，可以寫在這里
methods：常規(guī)的 js 方法就放在這里
安裝路由
1、安裝路由插件
npm?install?--save?vue-router2、在 main.js 中引入路由
import?router?from?'./routers/router'new?Vue({
????router,
????render:?h?=>?h(App),
}).$mount('#app')
3、在 src 目錄中添加 routers 目錄，在該目錄新增 router.js 文件，內容如下
import?Vue?from?"vue";import?Router?from?"vue-router";
Vue.use(Router);
const?router?=?new?Router({
????mode:?'history',
????routes:?[{
????????????path:?"/login",
????????????name:?"login",
????????????component:?()?=>
????????????????import?("@/components/login.vue")
????????},
????????{
????????????path:?"*",
????????????redirect:?"/"
????????}
????]
})
export?default?router;
添加了 /login 的路由地址，指向 login.vued的組件
4、修改 App.vue 組件
??<div?id="app">????<img?alt="Vue?logo"?src="./assets/logo.png">
????<router-view>router-view>
??div>
添加了 router-view 后，路由中指定的組件就會被替換到此處。
5、此時訪問 http://localhost:8080/login 可以看到下面界面
添加 home.vue 組件
home 組件是登錄成功后要跳轉到的組件，該組件包含一個子組件 top-bar。
1、在 components 目錄下添加 top-bar.vue 和 home.vue 文件
top-bar.vue
<template>????<div>這是網(wǎng)站的頭部div>
template>
<script>export?default?{name:"top-bar"
}script>
<style?scoped>style>
home.vue
<template>??<el-container?id="main-view">
????<el-header?class="header">
??????????<top-bar>top-bar>
????el-header>
????<el-main>
????????這是正文部分
????el-main>
??el-container>
template>
<script>import?TopBar?from?"@/components/top-bar.vue";export?default?{name:?"home",components:{
?????????TopBar
????}
};script>
<style?lang="css"?scoped>.header{background-color:?rgb(0,?120,?215);color:aliceblue;padding-left:0;height:48px;
}style>
2、修改 login 組件的 login() 方法，添加登錄路由跳轉的邏輯
3、修改 router.js ，添加登錄后跳轉的路由配置
運行后，點擊登錄按鈕就可以跳轉到 home 組件了。
路由傳參
登錄成功后，將登錄名傳遞到 home 組件中，通過路由傳參的方式有很多種，這里使用 query 的方式
1、修改登錄成功后的跳轉
this.$router.push({????path:?"/",
????query:?{
????????code:?loginName
??????}
});
2、home 組件添加變量接收參數(shù)值
組件通訊-父組件傳遞到子組件
父組件傳遞數(shù)據(jù)到子組件的方法是在子組件定義 props ，本例中將 home 組件接收到的登錄名傳遞到 top-bar 組件中。
1、在 top-bar 組件中定義 props
2、修改 home 組件進行傳值
:code="loginName">組件通訊-子組件傳遞到父組件
子組件傳遞到父組件使用 $emit ，本例中在 top-bar 組件中添加一個按鈕，點擊按鈕傳遞參數(shù)到 home 組件，并改變 home 組件的 loginName的值。
1、top-bar 組件中添加按鈕和相關事件
2、在 home 組件中進行事件接收
接口調用
在 Vue 中使用 axios 需要先進行插件的安裝
npm?install?axios?--saveaxios 的使用請點擊「閱讀原文」查看示例代碼。
發(fā)布部署
發(fā)布
使用下面命令可以將項目發(fā)布到 dist 目錄中
npm?run?build發(fā)布結果如下
部署到Docker
1、在 dist 目錄中創(chuàng)建 Dockerfile文件，文件內容如下
FROM?nginx:latestCOPY?.?/usr/share/nginx/html/
EXPOSE?80
CMD?["nginx",?"-g",?"daemon?off;"]
2、進入到 dist目錄，執(zhí)行下面命令進行鏡像的構建
docker?build?-t?vue-demo?.3、創(chuàng)建 nginx 配置文件，在執(zhí)行 docker run 時會將容器內的配置文件映射出來
server?{????listen???????80;
????server_name??221.234.36.41;
????client_max_body_size?100M;
???location?/?{?
????????root???/usr/share/nginx/html;
????????index??index.html?index.htm;
????????try_files?$uri?$uri/?/index.html;
???}
???error_page???500?502?503?504??/50x.html;
????location?=?/50x.html?{
????????root???/usr/share/nginx/html;
????}
}
3、執(zhí)行 docker run 創(chuàng)建容器
docker?run?-d?-p?9000:80?--name?vue-demo?-v?~/Documents/fengwei/projects/conf.d:/etc/nginx/conf.d:ro?--restart=always?vue-demo在瀏覽器輸入 http://localhost:9000 可以查看運行效果。
示例代碼：https://github.com/oec2003/StudySamples/tree/master/VueSample/hello-world
希望本文對您有所幫助。
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結
以上是生活随笔為你收集整理的tomcat如何部署.net程序_.NET 程序员如何学习Vue的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JVM（一）史上最佳入门指南
- 下一篇： 思维导图，流程图模板整合