Vue プロジェクト学生管理システム環境の構築

プログラミング 2023-05-05 01:14:53 訪問数: null

ヒント: 記事を書いた後、目次を自動生成することができます. 生成方法は右のヘルプドキュメントを参照してください.

記事ディレクトリ

序文

機能実現に関しては、学生管理システムは主に学生管理システムのホームページへの登録、ログイン、およびログイン転送を実現します。左側のナビゲーション ルートは、ページ ジャンプを実現し、右側のメイン エリアに管理インターフェイスを表示します。

1. Vue プロジェクトの作成

このプロジェクトは Vue フレームワークに基づいて開発されているため、Vue-CLI をグローバルにインストールする必要があります。

npm install -g @vue/[email protected]

Vue-CLI をインストールしたら、コマンドを使用して Vue-CLI が正常にインストールされているかどうかを確認します。

vue -V   //V大写

vue が内部コマンドではないことが示されている場合は、環境変数を構成する必要があります。

1. プロジェクトを作成する

コマンドを使用して msm プロジェクトを作成する

vue create msm

3 番目のカスタム項目を選択し、プラグインを構成し、スペースを使用して選択し、上下キーを使用して位置を切り替え、選択が完了したら Enter キーを押すか、表示されたくない場合は Enter キーを押します。写真が示すように。プロジェクト初期化プラグイン構成
その後の構成

プロジェクト作成後、msmディレクトリ配下のターミナルでコマンドを入力し、プロジェクトが正常に作成されているか確認してください。以下の図が表示されたら作成成功です。

npm run serve

ここに画像の説明を挿入

2. プロジェクトの初期化

1. プロジェクト サービス ファイルを構成する

vue.config.jsファイルでプロジェクトのポート、サーバーのドメイン名のホスト名、プロトコルを有効にするかどうか、ブラウザで自動的に開くかどうか、フォーマットのチェックとパッケージングを設定する必要があります。マップファイル。
コードは次のとおりです (例)。

module.exports = {
    
    
    devServer:{
    
    
        port:8888,  //端口号设置为8888
        host:"localhost", //主机采用本地服务
        https:false,  //不会启用http协议
        open:true, //浏览器自动打开
    },
    lintOnSave:false, //格式检查关闭
    productionSourceMap:false, //map文件不会打包
}

2. サードパーティ コンポーネント ライブラリをインストールする

このプロジェクトでは、axios を使用してバックエンド データを受信し、非同期リクエストを作成し、pubsub を使用して非親子コンポーネントの値を渡す必要があります。ElementUI を使用して、フロントエンド ページの組み合わせを完成させます。インストール手順は次のとおりです。

npm install -S axios pubsub-js element-ui

ElementUI を使用してページを完成させたいので、import を使用して msm ディレクトリ下の main.js に要素をインポートし、Vue.use(ElementUI) を通じて要素を使用する必要があります。VScode に拡張要素 UI スニペット プラグインをインストールして、要素の構文ヒントを実装します。
コードは以下のように表示されます

import Vue from "vue";
import ElementUI from "element-ui"; //组件库
import 'element-ui/lib/theme-chalk/index.css' //样式
import App from "./App.vue";
import router from "./router";

Vue.use(ElementUI);
Vue.config.productionTip = false;
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

2. 公理をカプセル化し、クロスドメインの問題を解決する

axios を使用して、コンポーネントの非同期リクエストとバックグラウンド データの転送を完了します。非同期リクエストを渡すために axios をカプセル化し、後でインターセプターを構成する必要があります。msm の下の src ディレクトリの下に utils フォルダーを作成し、utils フォルダーの下に request.js ファイルを作成して、パッケージ化された axios を格納します。

import axios from 'axios';
//1....获取db.json数据的第一种方法，通过get获取数据 
// axios.get("/db.json").then(response=>{
//     console.log(response.data);
// })
//2.....获取db.json的第二种方法，通过调用axios方法获取数据
// axios({
//     method:"get",
//     url:"/db.json"
// }).then(response=>{
//     console.log(response.data);
// })
// 3....获取db.json的第三种方法，通过自己封装一个axios来获取数据,其中request便是axios所起的变量名
const request = axios.create({
    // baseURL:"/",
    timeout:5000,
});
// 该方法使用在test.js中，
// request({  //这里的request就是axios.create方法所起的变量名
//    method:"get" ,
//    url:"/db.json"
// }).then(response=>{
//     console.log(response.data);
// })

上記のコードで渡された db.json は、渡された偽のデータであり、ファイルは public フォルダーに保存されます。

[
    {"name": "小黑", "age": 18},
    {"name": "小岳岳", "age": 28},
    {"name": "林志玲", "age": 38}
]

axios メソッドをカプセル化した後、このメソッド request() を呼び出して、test.js で非同期リクエストを作成し、db.json のデータを取得する必要があります。

import request from "@/utils/request.js";
// request({  //这里的request就是axios.create方法所起的变量名
//    method:"get" ,
//    url:"/db.json"
// }).then(response=>{
//     console.log(response.data);
// })

ここでは、ブラウザのバックグラウンド コンソールに表示されたデータを確認できます. 次に、開いた Vue ページの Welcome to Your Vue.js App を、渡した db.json データに置き換えます. test.js が必要ですaxiosの非同期リクエストで取得したデータオブジェクトをエクスポートし、コンポーネント配下のHelloWorld.vueがエクスポートしたオブジェクト(response.data)を取得するので、非同期リクエストオブジェクト全体の転送処理は以下のようになります。
1. test.js で非同期リクエスト オブジェクトをエクスポートします。

import request from "@/utils/request.js";
//request方法运行后会返回一个异步对象，通过调用getList()方法利用return将该异步对象传入HelloWorld.vue中，
export default {
    getList() {
        return request({ //这里的request就是axios.create方法所起的变量名
            method: "get",
            url: "/db.json"  
            /*由于在8888访问8001的项目会出现跨域问题，要解决该跨域问题需要在vue.config.js配置
             代理来解决跨域问题。
             */
        })
    }
}

2. import を介して HelloWorld.vue にインポート
fetchData() を使用して test.js で定義された getList メソッドを使用し、test 変数を介して getList を呼び出して db.json の値を取得します。つまり、非同期リクエストは値を割り当てます。作成した関数内で fetchData メソッドを呼び出し、リストを h1 にバインドします。

<template>
  <div class="hello">
    <h1>{
   
   { list }}</h1>
  </div>
</template>
<script>
// import request from '@/utils/request.js'
import test from '@/api/test.js'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data(){
     return{
        list:[]
     }
  },
  created(){
    this.fetchData();
  },
  methods:{
    fetchData(){
      test.getList().then(response=>{
        console.log("vue",response.data);
        this.list = response.data;
      })
    }
  },
};
</script>

3. request.js でインターセプターを構成する
// request.js でインターセプターを構成します。フロントエンド ページとバックエンド データ ポートの中間部分として、データの取得などのデータ処理にインターセプターが使用されます。リストとデータ操作の実行。

// リクエスト インターセプターを設定
axios.interceptors.request.use(config=>{ return config },error=>{ // エラーが発生した場合は例外をスローreturn Promise.reject(error); })




// レスポンスインターセプターを設定
request.interceptors.response.use(response=>{ return response },error=>{ return Promise.reject(error) })



デフォルトのリクエストをエクスポートします。

3. クロスドメインの問題を解決する

このプロジェクトのサービスを起動するポートは vue.config.js で 8888 に設定されています. http://localhost:8001 のデータを取得したい場合、ポート番号の変更により、プロジェクトはクロスに遭遇します. -ドメインの問題があるため、クロスドメイン構成のために vue.config.js でプロキシを有効にする必要があります。

module.exports = {
    devServer:{
        port:8888,  //端口号设置为8888
        host:"localhost", //主机采用本地服务
        https:false,  //不会启用http协议
        open:true, //浏览器自动打开
        proxy:{ //开发环境的代理，现在是启动8888端口的服务器，获取到的是8001端口的数据
            // '/dev-api':{ //请求路径上带有标识就会代理
            //     target:"http://localhost:8001", //代理到那个服务器即目标服务器。
            //     changOrigin:true, //开启代理
            //     pathRewrite:{
            //         '^/dev-api':'', //将/dev-api移除
            //     }
            // }
        }
    },
    lintOnSave:false, //格式检查关闭
    productionSourceMap:false, //map文件不会打包
}

同時に、reuqest.js の axios.create のパスを変更する必要があります。

const request = axios.create({
    // baseURL:"/dev-api", //这里不能有dev-api,否则会把dev-api拼接到localhost:888后，路径就会出错。
    timeout:5000,
});


異なる環境でのリクエストの URL は異なる場合があるため、「/dev-api 」と「http://localhost:8001」を格納する定数値を設定して、
.env.development ファイルを作成し、変数を開発環境。

VUE_APP_BASE_API = '/dev-api'
VUE_APP_SERVICE_URL = 'http://localhost:8001'

運用環境に変数を格納する .env.production ファイルを作成します。

VUE_APP_BASE_API = '/pro-api'

ここまでで、この章のすべての内容が終わり、最終ページが図に示されています。

request.js

import axios from 'axios';

//1....获取db.json数据的第一种方法，通过get获取数据 
// axios.get("/db.json").then(response=>{
//     console.log(response.data);
// })

//2.....获取db.json的第二种方法，通过调用axios方法获取数据
// axios({
//     method:"get",
//     url:"/db.json"
// }).then(response=>{
//     console.log(response.data);
// })

// 3....获取db.json的第三种方法，通过自己封装一个axios来获取数据,其中request便是axios所起的变量名
const request = axios.create({
    // baseURL:"http://localhost/8888",
    // baseURL:"/dev-api", //这里不能有dev-api,否则会把dev-api拼接到localhost:888后，路径就会出错。
    baseURL: process.env.VUE_APP_BASE_API, 
    // baseURL:"/",
    timeout:5000,
});


// 该方法使用在test.js中,request.js只用于封装axios方法，路径的获取应独自存放，我们另建立test.js
// request({  //这里的request就是axios.create方法所起的变量名
//    method:"get" ,
//    url:"/db.json"
// }).then(response=>{
//     console.log(response.data);
// })

// 在request.js中配置拦截器，拦截器作为前端页面和后端数据端口的中间部分，用于进行数据处理，如获取数据列表，进行数据操作。

// 设置请求拦截器
axios.interceptors.request.use(config=>{
    return config
},error=>{
    // 出错抛出异常
    return Promise.reject(error);
})

// 设置响应拦截器
request.interceptors.response.use(response=>{
    return response
},error=>{
    return Promise.reject(error)
})

export default request;

test.js

import request from "@/utils/request.js";

// request({  //这里的request就是axios.create方法所起的变量名
//    method:"get" ,
//    url:"/db.json"
// }).then(response=>{
//     console.log(response.data);
// })
//request方法运行后会返回一个异步对象，通过调用getList()方法利用return将该异步对象传入HelloWorld.vue中，
export default {
    getList() {
        return request({ //这里的request就是axios.create方法所起的变量名
            method: "get",
            // url: "/db.json"
            url: "/db.json"  
            /*由于在8888访问8001的项目会出现跨域问题，要解决该跨域问题需要在vue.config.js配置
             代理来解决跨域问题。
             */
        })
    }
}

main.js

import Vue from "vue";
import ElementUI from "element-ui";
// import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/index.css'
import App from "./App.vue";
import router from "./router";

Vue.use(ElementUI);
// Vue.config.productionTip = process.env.NODE_ENV === "production";
// console.log(process.env.VUE_APP_SERVICE_URL);
Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

view.config.js

module.exports = {
    devServer:{
        port:8888,  //端口号设置为8888
        host:"localhost", //主机采用本地服务
        https:false,  //不会启用http协议
        open:true, //浏览器自动打开
        proxy:{ //开发环境的代理，现在是启动8888端口的服务器，获取到的是8001端口的数据
            // '/dev-api':{ //请求路径上带有标识就会代理
            //     target:"http://localhost:8001", //代理到那个服务器即目标服务器。
            //     changOrigin:true, //开启代理
            //     pathRewrite:{
            //         '^/dev-api':'', //将/dev-api移除
            //     }
            // }
            [process.env.VUE_APP_BASE_API]: {
                target: process.env.VUE_APP_SERVICE_URL, // 在 .env.development 中配置的
                changOrigin: true, //开启代理
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        }
    },
    lintOnSave:false, //格式检查关闭
    productionSourceMap:false, //map文件不会打包
}

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{
   
   { list }}</h1>
  </div>
</template>

<script>
// import request from '@/utils/request.js'
import test from '@/api/test.js'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data(){
     return{
        list:[]
     }
  },
  created(){
    this.fetchData();
  },
  methods:{
    fetchData(){
      test.getList().then(response=>{
        console.log("vue",response.data);
        this.list = response.data;
      })
    }
  },
};

ここに画像の説明を挿入

要約する

この章では、主に Vue プロジェクトの事前環境とサードパーティ コンポーネント ライブラリの構成とインストールを行い、プロジェクトが非同期リクエストを通じてデータを取得し、プロジェクトのクロスドメインの問題を解決する方法について簡単に説明します。

おすすめ

転載: blog.csdn.net/qq_49375885/article/details/125264476
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com