add an existed project

vue3-vuetify3-typescript-blog-system/ProductDetail.vue

@@ -0,0 +1,160 @@
+<script setup>
+import { reactive,ref } from 'vue';
+import { stringifyQuery } from 'vue-router';
+import img from '@/assets/test.png'
+// let getProduct = reactive({
+//   id:Number,
+//   isStock:Boolean,
+//   name:String,
+//   description:String,
+//   rating:Number,
+//   salePrice:Number,
+//   offerPrice:Number,
+//   colors:String,
+//   qty:String,
+// })
+
+let getProduct = reactive({
+  id:Number,
+  isStock:true,
+  name:'产品名称',
+  description:"Landsat 8 是美国陆地卫星计划（Landsat）的第八颗卫星，于2013年2月11号在加利福尼亚范登堡空军基地由Atlas-V火箭搭载发射成功，最初称为“陆地卫星数据连续性任务”（Landsat Data Continuity Mission，LDCM）。",
+  rating:4,
+  salePrice:15,
+  offerPrice:12,
+  inventory:300,
+  state:'良好',
+  category:'标准产品',
+  qty:String,
+}) 
+
+let tab = ref()
+
+let text = ref( )
+
+</script>
+
+<template>
+<div>
+  <v-row>
+    <v-col lg="5" sm="12">
+      <v-card id="my_card" >
+       <v-img class="mx-auto"
+       height="100%"
+       width="100%"
+       cover
+    :src="img"
+  ></v-img>
+  </v-card>
+      </v-col>
+      <v-col lg="7" sm="12">
+        <v-row>
+        <div class="d-flex align-top">
+          <div>
+            <v-chip color="success" v-if="getProduct.isStock"> In Stock </v-chip>
+            <v-chip color="error" v-else> Out of Stock </v-chip>
+            <h3 class="text-h3 my-2 mb-3 ms-3">{{ getProduct.name }} <v-chip color="info" variant="outlined" size="small"> New</v-chip></h3>
+          </div>
+        </div>
+       </v-row>
+       <v-row>
+
+       </v-row>                    
+        <v-divider class="my-3"></v-divider>
+
+        <v-row>
+          <v-col lg="12">
+            <div class="d-flex align-center gap-2">
+          <h2 class="text-h2 text-primary">${{ getProduct.salePrice }}</h2>
+          <v-chip  color="secondary" size="x-large">
+            <p>折扣后</p><p class="text-decoration-line-through text-medium-emphasis">${{ getProduct.offerPrice }}</p>
+          </v-chip>
+        </div>
+          </v-col>
+          <v-col lg="4">
+            <tr>
+              <td><p class="text-left text-subtitle-2">库存：</p></td>
+              <td><p>{{getProduct.inventory }}</p></td>
+            </tr>
+          </v-col>
+          <v-col lg="4">
+            <tr>
+              <td><p class="text-left text-subtitle-2">产品状态：</p></td>
+              <td><p>{{ getProduct.state }}</p></td>
+            </tr>
+          </v-col>
+          <v-col lg="4">
+            <tr>
+              <td><p class="text-left text-subtitle-2">类别：</p></td>
+              <td><p>{{ getProduct.category }}</p></td>
+            </tr>
+          </v-col>
+          <v-col lg="12">
+            <p class="text-left text-subtitle-2">产品来源：</p>
+            <p class="text-left v-col-lg-12 px-0">{{ getProduct.description }}</p>
+          </v-col>
+          <v-col lg="12" class="pb-0 pt-0">       
+              <p class="text-left text-subtitle-2 mb-2 ">产品评分：</p> 
+              <div class="text-medium-emphasis align-center d-flex mb-0 gap-2 ">
+                <v-rating color="primary"  half-increment v-model="getProduct.rating" > </v-rating>
+                <small>({{ getProduct.rating }}+)</small>
+              </div>  
+          </v-col>
+          <v-col lg="6">
+            <v-btn block color="primary" @click="store.AddToCart(getProduct)">
+              <p style="font-weight: bold;">加入购物车</p>
+            </v-btn>
+          </v-col>
+          <v-col lg="6">
+            <v-btn block color="secondary" to="/ecommerce/checkout" @click="store.AddToCart(getProduct)">
+              <p style="font-weight: bold;">立即订购</p>
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-col>
+      <v-col>
+    <v-tabs 
+      v-model="tab"
+      color="primary"
+      align-tabs="center"
+      
+    >
+      <v-tab :value="1">产品介绍</v-tab>
+      <v-tab :value="2">参数选择</v-tab>
+    </v-tabs>
+    <v-divider 
+    color="red"
+        :thickness="2"
+    ></v-divider>
+    <v-window >
+      <v-window-item :value="1">
+        <v-card-text>
+            <!-- 加载markdown -->
+            <!-- <v-md-preview :text="text"></v-md-preview> -->
+          </v-card-text>
+      </v-window-item>
+      <v-window-item :value="2">
+
+      </v-window-item>
+    </v-window>
+  </v-col>
+    </v-row>
+</div>
+</template>
+
+<style scoped>
+.productCustomize tr td {
+  padding: 15px 20px;
+  vertical-align: center;
+}
+#my_card{
+  position: relative;
+  height: 100%;
+  width: 90%;
+  left: 5%;
+}
+
+.v-divider{
+  border-color: rgb(var(--v-theme-secondary)) !important;
+}
+</style>

vue3-vuetify3-typescript-blog-system/README.md

@@ -0,0 +1,7 @@
+# Vue3, Vuetify3, TypeScript 文章网站系统
+
+## 简介
+
+一个基于 Vue3, Vuetify3 和 TypeScript 的文章网站系统
+
+## 

vue3-vuetify3-typescript-blog-system/dataAdd.js

@@ -0,0 +1,73 @@
+import {WFS} from 'ol/format';
+
+export default class useWfs{
+   constructor(feature){
+       this.feature = feature//传入要增删改的图层数据
+   }
+   
+//添加图层到数据库和服务器
+    wfsAdd() {
+        let WFSTSerializer = new WFS();
+        let featObject = WFSTSerializer.writeTransaction([this.feature],
+            null, null, {
+            featureType: 'shop',
+            featurePrefix: 'build',
+            featureNS: 'Http://localhost:8084/geoserver/test',
+            srsName: 'EPSG:3857'
+        });
+        //创建请求
+        let serializer = new XMLSerializer();
+        let featString = serializer.serializeToString(featObject);
+        let request = new XMLHttpRequest();
+        //发送请求
+        this.wfsSend(request,featString)
+    }
+
+//删除数据
+    wfsDelete() {
+        let WFSTSerializer = new WFS();
+        let featObject = WFSTSerializer.writeTransaction(null,
+            null, [this.feature], {
+            featureType: 'shop',//图层名
+            featurePrefix: 'build',
+            featureNS: 'Http://localhost:8084/geoserver/test',//命名空间uri
+            srsName: 'EPSG:3857'
+        });
+        //创建请求
+        let serializer = new XMLSerializer();
+        let featString = serializer.serializeToString(featObject);
+        let request = new XMLHttpRequest();
+        this.wfsSend(request,featString)
+    }
+
+//修改数据
+    wfsModify() {
+        let WFSTSerializer = new WFS();
+        let featObject = WFSTSerializer.writeTransaction(null,
+            [this.feature], null, {
+            featureType: 'shop',
+            featurePrefix: 'build',
+            featureNS: 'Http://localhost:8084/geoserver/test',
+            srsName: 'EPSG:3857'
+        });
+        //创建请求
+        let serializer = new XMLSerializer();
+        let featString = serializer.serializeToString(featObject);
+        let request = new XMLHttpRequest();
+        this.wfsSend(request, featString)
+    }
+
+//发送数据请求  
+    wfsSend(request, featString) {
+        console.time('aaa')
+        request.open('POST', 'http://localhost:8084/geoserver/test/ows?');
+        request.setRequestHeader('Content-Type', 'text/xml');
+        request.send(featString);
+        request.onreadystatechange = function () {
+            if (request.readyState === 4 && request.status === 200) {
+                console.log(request.responseText);
+            }
+        }
+        console.timeEnd('aaa')
+    }
+}

vue3-vuetify3-typescript-blog-system/dataSearch.js

@@ -0,0 +1,32 @@
+import {WFS,GeoJSON} from 'ol/format';
+
+export default class searchWfs{
+    constructor(filter){
+        this.filter = filter//传入要增删改的图层数据
+    }
+
+    requestData(callback){
+        var features = null;
+        var featureRequest = new WFS().writeGetFeature({
+            srsName: 'EPSG:3857',
+            featureNS: 'Http://localhost:8084/geoserver/test',
+            featurePrefix: 'build',
+            featureTypes: ['shop'],
+            outputFormat: 'application/json',
+            filter: this.filter     
+        });
+        
+        console.time('aaa')
+        fetch('http://localhost:8084/geoserver/test/ows?', {
+            method: 'POST',
+            body: new XMLSerializer().serializeToString(featureRequest)
+        }).then(function (response) {
+            return response.json();
+        }).then(function (json) {
+             features = new GeoJSON().readFeatures(json);
+             callback(features);
+             console.log(features);
+        }).catch(console.log('查询失败'))
+        console.timeEnd('aaa')
+    }
+}

vue3-vuetify3-typescript-blog-system/page1.vue

@@ -0,0 +1,128 @@
+<template>
+  <v-container class="bg-surface-variant mb-6">
+    <v-row>
+      <v-col v-for="(item, index) in imgArr" :key="index" cols="4">
+        <v-card>
+          <v-img :src="item" cover aspect-ratio="16/9">
+          </v-img>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col v-for="(item, index) in dataArr" :key="index" cols="2">
+        <v-card max-width="200" max-height="300" variant="tonal">
+          <v-card>
+            <v-img :src="item.img" height="100px" cover aspect-ratio="16/9">
+            </v-img>
+          </v-card>
+          <v-card-item>
+            <div>
+              <div>
+                <p style="font-size: 12px;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;">{{ item.title }}</p>
+              </div>
+            </div>
+          </v-card-item>
+          <v-card-subtitle>
+            <p style="font-size: 5px;"> {{ item.subtile }}</p>
+          </v-card-subtitle>
+        </v-card>
+      </v-col>
+    </v-row>
+    <br><br>
+    <v-pagination :length="6" rounded="circle" v-model="page" @click="onPageChange()"></v-pagination>
+  </v-container>
+</template>
+
+
+<script>
+import { reactive , ref } from 'vue'
+export default {
+  setup() {
+    let imgArr = reactive([
+    'https://image.gcores.com/b14b6a4b4cc88d5ff8685518923d2f54-1600-900.jpg?x-oss-process=image/resize,limit_1,m_fill,w_717,h_402/quality,q_90/format,webp',
+    'https://image.gcores.com/8089eecb20a204ce6b157bdeb66e470d-1600-900.jpg?x-oss-process=image/resize,limit_1,m_fill,w_717,h_402/quality,q_90/format,webp',
+    'https://image.gcores.com/43969d1c09ed637f48b558ede508c860-1600-900.png?x-oss-process=image/resize,limit_1,m_fill,w_717,h_402/quality,q_90/format,webp'
+    ])
+
+    let dataArr = reactive([
+      {
+        title: '《守望先锋》“归来”现已成Steam差评率第一的游戏',
+        subtile: '我是副标题',
+        img: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'
+      },
+      {
+        title: '休闲冒险游戏《美希与猫之岛 -Neko Odyssey-》上线Steam商城页，将于2024年发售',
+        subtile: '我是副标题',
+        img: 'https://image.gcores.com/03aed77757653235ab200815b828bf0e-460-215.jpg?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
+      },
+      {
+        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
+        subtile: '我是副标题',
+        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
+      },
+      {
+        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
+        subtile: '我是副标题',
+        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
+      },
+      {
+        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
+        subtile: '我是副标题',
+        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
+      },
+      {
+        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
+        subtile: '我是副标题',
+        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
+      },
+      {
+        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
+        subtile: '我是副标题',
+        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
+      },
+      {
+        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
+        subtile: '我是副标题',
+        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
+      },
+      {
+        title: '《守望先锋》“归来”现已实装智械入侵更新，Steam版同步推出',
+        subtile: '我是副标题',
+        img: 'https://image.gcores.com/1b695803a90f873b53041abe77790d2e-1887-819.png?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp'
+      },
+    ])
+    
+    let page = ref(1)
+    function onPageChange(){
+
+       //dataArr.length = 0
+      
+       dataArr .push({
+        title: '《守望先锋》“归来”现已成Steam差评率第一的游戏',
+        subtile: '我是副标题',
+        img: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'
+      })
+       console.log(dataArr)
+      console.log(dataArr)
+    }
+
+    return {
+      dataArr,
+      page,
+      imgArr,
+      onPageChange
+    }
+  },
+}
+</script>
+
+
+<style>
+
+</style>

vue3-vuetify3-typescript-blog-system/page2.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-container>
+    <v-row justify="center">
+      <v-col cols="12" lg="8">
+        <v-card class="mx-auto" variant="tonal">
+          <v-card>
+            <v-img :src="imgSrc" cover></v-img>
+          </v-card>
+          <br><br>
+          <v-card-item>
+            <v-card-title>
+              <p style="font-size: 30px;
+          text-align: left;
+          word-break: break-all;">《星露谷物语》官方食谱书2024年4月16日发售</p>
+            </v-card-title>
+            <br>
+            <v-card-subtitle>
+              <p style="font-size: 18px;text-align: left;">收录50种以上食谱</p>
+            </v-card-subtitle>
+          </v-card-item>
+          <v-card-actions>
+            <v-list-item class="w-100">
+              <template v-slot:prepend>
+                <v-avatar color="grey-darken-3"
+                  image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"></v-avatar>
+              </template>
+              <v-list-item-title style="font-size: 15px;text-align: left;">羊星亮</v-list-item-title>
+              <v-list-item-subtitle style="font-size: 10px;text-align: left;">3天前发布</v-list-item-subtitle>
+            </v-list-item>
+          </v-card-actions>
+          <v-card-text>
+            <v-md-preview :text="text"></v-md-preview>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import {ref,onMounted} from 'vue'
+export default {
+  setup() {
+    let text = ref()
+    let imgSrc = ref('https://image.gcores.com/ced586d33dc9ab574ae8f769adece3ed-616-353.jpg?x-oss-process=image/resize,limit_1,m_lfit,w_1200/quality,q_90/format,webp')
+    onMounted(async () => {
+      text.value = await(await fetch('https://bitbucket.org/tutorials/markdowndemo/raw/5b6c39df3196eeeb8a36684beb9a3df854a0b5f3/README.md')).text()
+      console.log(text.value)
+    });
+    return {text,
+      imgSrc};
+  }
+};
+</script>